v0.13.0で導入されたReact.findDOMNode
メソッドを使って、this.props.children
にマッピングすることで、親に渡された各子コンポーネントのDOMノードを取得することができます。
しかし、子の一部がたまたまコンポーネントではなくReact Elementsであった場合(例えば、子の一つがJSXで作成された<div>
であった場合)、Reactは不変性違反のエラーを投げます。
子がどのクラスであっても、マウント後に各子の正しいDOMノードを取得する方法はありますか?
this.props.children`は、ReactElementかReactElementの配列でなければなりませんが、コンポーネントではありません。
子要素のDOMノードを取得するには、子要素をクローンして、新しいrefを割り当てる必要があります。
render() {
return (
<div>
{React.Children.map(this.props.children, (element, idx) => {
return React.cloneElement(element, { ref: idx });
})}
</div>
);
}
その後、子コンポーネントには this.refs[childIdx]
でアクセスし、その DOM ノードを ReactDOM.findDOMNode(this.refs[childIdx])
で取得することができます。
これは、refs属性を使うことで可能になるかもしれません。
例えば、<div>
にたどり着きたい場合は、<div ref="myExample">
を使用します。 そして、React.findDOMNode(this.refs.myExample)
を使うことで、そのDOMノードを取得することができます。
そこから各子の正しいDOMノードを取得するには、this.refs.myExample.children
をマッピングするだけでいいかもしれませんが(まだテストしていません)、少なくともref属性を使うことでマウントされた特定の子ノードを取得することができます。
詳しくは公式のreact documentation on refsを参照してください。