React render/update canvas

나는 반응을 배우고 있으며 반응이있는 캔버스를 렌더링하고 상태가 변경 될 때마다 업데이트하려고합니다.React render/update canvas

//set initial state 
constructor(props) { 
    super(props); 
    this.state = { 
     imgFile: this.props.imgFile, 
     show: false 
    }; 
} 

//The render canvas 
render() { 
    return (
     <div className="col-sm-4"> 
     <canvas ref={(c) => { this.myCanvas = c; }} /> 
     </div> 
    ); 
    }

내 질문은 : 소품으로 캔버스를 업데이트 할 방법이 있습니까? 지금까지 나는 이것을 얻었다 :

componentDidMount() { 
    const origin = this.state.imgFile; 
    // canvas area/img calculations 
    this.funcForDrawCanvas(origin.path, origin.presition, origin.height, origin.width); 
}

그러나 구성 요소를 마운트 한 후에는 더 이상 어떤 생각을 업데이트하지 않습니까? 또는 캔버스 태그를 제거하고 상태가 변경되면 다시 넣는 방법이 있습니까?

출처

2016-10-06 Rey Pena

각 구성 요소 사양의 내용을 읽으십시오. 이 작업을 수행하는 방법은 여러 가지가 있지만 ['componentDidMount'] (https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount)에서 캔버스를 초기화하는 방법에 대해 다음을 사용하여 소품 변경 사항을 확인하십시오. ['shouldComponentUpdate'] (https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) 및 ['componentDidUpdate']에 캔버스 렌더링 (https://facebook.github.io) /react/docs/component-specs.html#updating-componentdidupdate). – Dom

@Dom 캔버스를 img로 다시 그릴 수있는 방법을 보여 주실 수 있나요? –

componentWillReceiveProps을 사용하여 소품의 변경 사항을 감지 한 다음이를 사용하여 캔버스에 그립니다.

출처

2016-10-13 16:05:55

React render/update canvas

답변

관련 문제