하위 구성 요소에서 요소를 참조하는 방법은 무엇입니까?

Question

하위 구성 요소에있는 요소를 참조하려고합니다. 그 부모 구성 요소에서 document.getElementById을 사용하고 있으며 잘 작동하지만, ref을 사용하는 것이 더 나은 방법이라고 들었습니다. 사실입니까? 그렇다면 어떻게 이루어 집니까?

부모 (컨테이너) 구성 요소 :

import CanvasView from '../view/CanvasView' 

export default class CanvasContainer extends Component { 
    componentDidMount(){ 
    var c = document.getElementById('canvas') 
    //DO SOMETHING WITH c 
    } 

    render(){ 
    return(
     <CanvasView /> 
    ) 
    } 
} 

아이 (프리젠 테이션) 구성 요소 :

export default const CanvasView =() => (
    <canvas id="canvas"></canvas> 
) 

Answer 1

의 라이프 사이클 이벤트에 반응하여 요소의 DOM이 나쁜 쿼리, 조금 지저분 연습도. 또한 하위 구성 요소에는 자체 라이프 사이클이 있으므로 이러한 상황을 처리하는 것은 까다로운 작업입니다. 또한 상위 구성 요소는 하위 refs에 대한 액세스 권한이 없으므로 하위 refs에 액세스 할 수 없습니다. 콜백 함수를 전달하고 선택한 하위 요소를 상위 구성 요소에 대한 참조로 전달할 수 있습니다. https://jsfiddle.net/ - 당신이 React.Component``에 등 같은 React.createClass``로, 그러나 당신이 그것을 할 수있는`refs`을 사용할 수없는 상태 비 저장 구성 요소로

var CanvasView = React.createClass({ 
    componentDidMount(){ 
    console.log('Child component did mount, do your stuff') 
    this.props.callback(this.exampleRef) 
    }, 
    render: function(){ 
    return(<div ref={(ref) => this.exampleRef = ref}>Foo</div>) 
    } 
}); 

var CanvasContainer = React.createClass({ 
    doSomethingWithChild(child){ 
    console.log('Parent component') 
    child.style.backgroundColor='red'; 
    }, 
    render: function(){ 
    return(<CanvasView callback={(e) => this.doSomethingWithChild(e)}/>); 
    } 
}); 

ReactDOM.render(<CanvasContainer/>,document.getElementById('app')); 

https://jsfiddle.net/nwwzyttt/2/