web-dev-qa-db-ja.com

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

子を含む親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>;
}

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

Reactこれを達成する方法は何ですか？

javascriptcssdomreactjs
23
Seth

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

根本的な問題は、要素を適切に配置するためにDOMノード（およびその親DOMノード）が必要ですが、最初のレンダリングが完了するまで利用できないことです。上記リンクの記事から：

DOM測定を実行するには、ほとんどの場合、「ネイティブ」コンポーネントに手を差し伸べ、refを使用して基礎となるDOMノードにアクセスする必要があります。 Refは、これを確実に行う唯一の実用的な方法の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)で状態を変更します。

18
Seth