Redux: refsはどうですか?

作成日 2015年06月27日  ·  8コメント  ·  ソース: reduxjs/redux

ref属性を持つ一部のコンポーネントの周りで<Connector>を使用すると、 this.refs介してアクセスできなくなります。 私はそれを修正するために少しリファクタリングしました-これはスマートコンポーネントとダムコンポーネントの無駄のようなものだと思います。 それとも私は何か簡単なものが欠けていますか?

help wanted question

最も参考になるコメント

申し訳ありませんが、このような些細なケースで「findDOMNode」の使用を奨励することが解決策と見なされることすらできないのです。 これはアンチパターンです! すべての要素にアクセスし、ノードの階層を正確に知る必要があるjqueryの時代に戻ります。 あなたのドキュメントは正しく読んでいます:

「findDOMNode()はエスケープハッチです...このエスケープハッチの使用は、コンポーネントの抽象化を貫通するため、お勧めしません」

全てのコメント8件

スマートコンポーネントとダムコンポーネント

そうだと思います。 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に関連するビットを参照してください。

このページは役に立ちましたか?
0 / 5 - 0 評価