4

次のコードがあります。

const priceCalculator = ReactDOM.render(<PriceCalculator />, reactHolder);

後でコードで使用する必要がありpriceCalculatorますが、ESLint は の戻り値を使用すべきではないと不平を言っていますReactDOM.render()。そのとき、コールバックである3 番目の引数を渡すことができることを発見しました。ReactDOM.render()すごい…と思いました。

ReactDOM.render(<PriceCalculator />, reactHolder, function(priceCalculator) {
    // do something with priceCalculator
});

しかしpriceCalculator、未定義です。デバッガーで例外を一時停止し、thisこの関数内にいるときに React コンポーネントに設定されていることを確認します。なので書き直し…

ReactDOM.render(<PriceCalculator />, reactHolder, function() {
    const priceCalculator = this;
    // do something with priceCalculator
});

まだ未定義です。どうしたの？

Webpack を使用して es6 React コードをコンパイルしています (babel を使用)。

4

1 に答える 1

6

リンクしたESLint ドキュメント ページでは、コールバック refを使用するように指示されています。

ReactDOM.render() は現在、ルート ReactComponent インスタンスへの参照を返します。ただし、この戻り値の使用は従来のものであり、避けるべきです。React の将来のバージョンでは、場合によってはコンポーネントが非同期でレンダリングされる可能性があるためです。ルート ReactComponent インスタンスへの参照が必要な場合、推奨される解決策は、ルート要素にコールバック refをアタッチすることです。

出典: React トップレベル API ドキュメント

そのため、prop を介してルート コンポーネントにコールバックを渡し、ルート ノードのproprenderを介して、そのメソッド内からコンポーネントのルート ノードを参照してこれを呼び出すことができます。ref

例（作業フィドル）：

class Hello extends React.Component {
  render () {
    return (
      <div ref={(node) => this.props.cb(node)}>
        Hello {this.state.name}
      </div>
    )
  }
}

let node

ReactDOM.render(<Hello cb={(n) => node = n} />, ...);

console.log(node)

注: このアプローチは単純でReactDOM.renderあり、常に同期的にレンダリングされるとは限りません。その場合、console.logステートメントは"undefined". (上記の引用を参照してください:「React の将来のバージョンは、場合によってはコンポーネントを非同期的にレンダリングする可能性があります」。)

于 2016-12-07T12:15:17.247 に答える