ref
属性を持つ一部のコンポーネントの周りで<Connector>
を使用すると、 this.refs
介してアクセスできなくなります。 私はそれを修正するために少しリファクタリングしました-これはスマートコンポーネントとダムコンポーネントの無駄のようなものだと思います。 それとも私は何か簡単なものが欠けていますか?
スマートコンポーネントとダムコンポーネント
そうだと思います。 Connector
を含む_smart_コンポーネントは、_dumb_コンポーネントをレンダリングし、必要なprops
をそれらに渡す必要があります。
@cymenこれにはrefコールバックを使用できます:)
const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
<strong i="7">@decorator</strong>
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
}
上記はdivをログに記録します。 多分これは役立ちますか?
これはデコレータを使用しますが、 Connector
内にネストしたコンポーネントにコールバックを渡した場合にもおそらく同様に機能します。 コールバック内で、refをコンポーネントに割り当てることができます。
ネストされた参照が本当に必要ですか?
DOMノードにアクセスしたいだけの場合は、外部コンポーネントでfindDOMNode
を実行でき、問題なく機能します。 (それらは同じノードを指します。)
メソッドを呼び出したい場合は、代わりにprops
を宣言型インターフェースとして使用することを検討してください。 これに関する議論については、 https://github.com/jsstyles/react-jss/issues/15も参照して
最後に、参照が必要な場合は、ええ、 https: //github.com/gaearon/redux/issues/183#issuecomment-115988937で提案されている@johanneslumpeのようなネストされた参照を取得できます。
最後に、不明な点がありましたらお知らせください。
申し訳ありませんが、このような些細なケースで「findDOMNode」の使用を奨励することが解決策と見なされることすらできないのです。 これはアンチパターンです! すべての要素にアクセスし、ノードの階層を正確に知る必要があるjqueryの時代に戻ります。 あなたのドキュメントは正しく読んでいます:
「findDOMNode()はエスケープハッチです...このエスケープハッチの使用は、コンポーネントの抽象化を貫通するため、お勧めしません」
申し訳ありませんが、このような些細なケースで「findDOMNode」の使用を奨励することが解決策と見なされることすらできないのです。 これはアンチパターンです! すべての要素にアクセスし、ノードの階層を正確に知る必要があるjqueryの時代に戻ります。
どういう意味かわかりません。 レンダリングされたノードへの参照が必要な場合(たとえば、オフセットとサイズを計算するため)、 findDOMNode(this)
使用できると言っています。 「もっと深く」したり、変更したりすることはお勧めしません。
とはいえ、これに満足できない場合は、上記のようにrefコールバック小道具を使用してください。
React-Nativeには適用できないので、 findDOMNode(this)
依存するべきではないと思います。
@xvalentinofindDOMNodeは必要ありません。 APIドキュメントのgetWrappedInstance
に関連するビットを参照してください。
最も参考になるコメント
申し訳ありませんが、このような些細なケースで「findDOMNode」の使用を奨励することが解決策と見なされることすらできないのです。 これはアンチパターンです! すべての要素にアクセスし、ノードの階層を正確に知る必要があるjqueryの時代に戻ります。 あなたのドキュメントは正しく読んでいます:
「findDOMNode()はエスケープハッチです...このエスケープハッチの使用は、コンポーネントの抽象化を貫通するため、お勧めしません」