React refsを使って子関数を呼び出すためのベストプラクティス

Question

子関数を呼び出すためにReact refを使用することを明確にしたいと考えています。いくつかのボタンがあるツールバーの親コンポーネントがあります。子コンポーネントでは、ライブラリのエクスポート機能にアクセスできます。親コンポーネントのボタンをクリックすると、このエクスポート関数が呼び出されます。

Parent.js [参照]

class Parent extends React.Component { 

    onExportClick =() => { 
    this.childRef.export(); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.onExportClick} />Export</button> 
     <Child ref={(node) => this.childRef = node;} /> 
     </div> 
    ) 
    } 
} 

Child.js [参照]

class Child extends React.Component { 

    export() { 
    this.api.exportData(); 
    } 

    render() { 
    <ExternalLibComponent 
     api={(api) => this.api = api} 
    /> 
    } 
} 

このソリューションは正常に動作し、：現在、私はこれを達成するために、参考文献に反応を使用していますこれがベストプラクティスである場合は、lotがdisagreementであることがわかりました。 Reactの公式docでは、「宣言的にできることは何でもrefを使うのは避けるべきです」と言います。同様の質問のdiscussion postでは、ReactチームのBen Alpertによると、 "refsは正確にこのユースケースのために設計されています"と述べていますが、通常は小道具を渡して宣言的に行うようにしてください。ここで

は私がrefせずに宣言的にこれを行うだろう方法は次のとおりです。

レフリーが、

Parent.js [宣言型]

class Parent extends React.Component { 

    onExportClick =() => { 
    // Set to trigger props change in child 
    this.setState({ 
     shouldExport: true, 
    }); 

    // Toggle back to false to ensure child doesn't keep 
    // calling export on subsequent props changes 
    // ?? this doesn't seem right 
    this.setState({ 
     shouldExport: false, 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.onExportClick} />Export</button> 
     <Child shouldExport={this.state.shouldExport}/> 
     </div> 
    ) 
    } 
} 

Child.js [宣言型]

class Child extends React.Component { 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.shouldExport) { 
     this.export(); 
    } 
    } 

    export() { 
    this.api.exportData(); 
    } 

    render() { 
    <ExternalLibComponent 
     api={(api) => this.api = api} 
    /> 
    } 
} 

この問題の "エスケープハッチ"とみなされます。この宣言的なolutionはちょっとハックリかもしれませんが、refを使うよりもうまくいくわけではありません。私はこの問題を解決するためにrefsを使用し続けるべきですか？あるいは、私は幾分かぎのような宣言的なアプローチをとるべきですか？あなたが戻ってfalseからshouldExportを設定する必要はありません

Answer 1

、あなたの代わりに変化を検出できます。

componentWillReceiveProps(nextProps) { 
    if (nextProps.shouldExport !== this.props.shouldExport) { 
     this.export(); 
    } 
} 

その後shouldExportのすべてのトグルは、1つのエクスポートを引き起こします。しかし、これは私がインクリメントしたい番号を使用したい、奇妙に見える：

componentWillReceiveProps(nextProps) { 
    if (nextProps.exportCount > this.props.exportCount) { 
     this.export(); 
    } 
} 

Answer 2

私は今、多くの場面で同じ問題に遭遇した、して反応チームはそれを奨励していないので、私が使用してすることがあります後で開発するための小道具メソッドですが、問題は親コンポーネントに値を返すことがあることがあります。イベントをトリガーするかどうかを決定するために子供の状態をチェックする必要があることもあるため、 、私はあなたが同じことをお勧めします