が反応：私は次のように見えるコンポーネント持っている子

Question

にDOM要素のプロパティを渡す：

export default class WebGLCanvas extends Component { 
    render() { 
    return (
     <div class="canvas-container"> 
     <Renderer></Renderer> 
     </div> 
    ) 
    } 
} 

をただし、インスタンスへの順<Renderer>コンポーネントに、私はそれを幅と高さプロパティを提供する必要があり、その.canvas-containerがインスタンス化された後でのみ定義されます。

子要素にDOM要素プロパティを渡す適切な方法は何ですか？

Answer 1

子供のコンポーネントに必要なプロパティを渡す独自のコンポーネント<Renderer/>を作成する必要があると思います。何かのように：

考えるコード：

export default class WebGLCanvas extends Component { 
    render() { 
    return <CanvasContainer />; // use the canvas-container component 
    } 
} 

Canvasコンテナ：

this.setState({ width, height }); 

： CanvasContainerで

export default class CanvasContainer extends Component { 

    constructor(props) { 
    super(props); 

    // initialize the state 
    this.state = { 
     width: 0, 
     height: 0 
    }; 
    } 

    render() { 
    const { width, height } = this.state; 
    return <Renderer width={width} height={height}></Renderer> 
    } 
} 

そして、あなたが設定どこwidthとheight、あなたは状態を介してそれらを設定します

これはを再レンダリングします

constructor() { 
    super(); 
    this.state = {height: 0, width: 0}; 
} 

componentDidMount() { 
    window.addEventListener('resize', this.resetDimensions); 
    this.resetDimensions(); 
} 

componentWillUnmount() { 
    window.removeEventListener('resize', this.resetDimensions); 
} 

resetDimensions() { 
    var canvasContainer = this.refs.canvasContainer; 
    this.setState({width: canvasContainer.clientWidth, height: canvasContainer.clientHeight}); 
} 

上記のコードは基本的には、Aセット：私はあなたがその子のイベントの寸法を計算するために、高さと幅が必要になりますRendererを実装しようとしていると思いますそのprops

Answer 2

にこれらをコンポーネントとパスheightおよびwidthをWebGLCanvasコンポーネントの状態として返します。私はこれが役に立てば幸い

return (
    <div className="canvas-container" ref="canvasContainer"> 
     <Renderer height={this.state.height} width={this.state.width}></Renderer> 
    </div> 
) 

：これを使用して

あなたは次のように、小道具としてレンダリングコンポーネントに高さと幅を渡すことができます。

P.S.反応バージョンに応じて、getDOMNodeの呼び出しが必要な場合とされない場合があります。