Reactコンポーネントをその親に対して相対的に配置する方法は？

Question

私は子供のReactコンポーネントを含む親のReactコンポーネントを持っています。

<div> 
    <div>Child</div> 
</div> 

子コンポーネントにスタイルを適用して親コンポーネント内に配置する必要がありますが、その位置は親のサイズによって異なります。

render() { 
    const styles = { 
    position: 'absolute', 
    top: top(), // computed based on child and parent's height 
    left: left() // computed based on child and parent's width 
    }; 
    return <div style={styles}>Child</div>; 
} 

ここでパーセント値は使用できません。上部と左の位置は、子と親の幅と高さの関数なので、ここでは使用できません。

これを達成するためのリアクション方法は何ですか？

Answer 1

この質問に対する回答は、Refs to Componentsに記載されているようにrefを使用することです。

根本的な問題は、DOMノード（およびその親DOMノード）が要素を適切に配置するために必要であることですが、最初のレンダリング後には使用できません。

DOM測定を実行するには、ほとんどの場合、「ネイティブ」コンポーネントにアクセスし、refを使用して基礎となるDOMノードにアクセスする必要があります。 Refsはこれを確実に行う唯一の実用的な方法の1つです。これが適切に最初にレンダリングした直後に要素を配置します

getInitialState() { 
    return { 
    styles: { 
     top: 0, 
     left: 0 
    } 
    }; 
}, 

componentDidMount() { 
    this.setState({ 
    styles: { 
     top: computeTopWith(this.refs.child), 
     left: computeLeftWith(this.refs.child) 
    } 
    }) 
}, 

render() { 
    return <div ref="child" style={this.state.styles}>Child</div>; 
} 

：ここ

は、ソリューションです。 propsに変更した後に要素の位置を変更する必要がある場合は、状態を componentWillReceiveProps(nextProps)に変更します。

Answer 2

これを行う正しい方法は、CSSを使用することです。 position:relativeを親要素に適用すると、子要素はその親に対してtopとleftを使用して移動できます。 top:50%のように、親要素の高さを利用するパーセンテージを使用することもできます。