React ES6 | refを介して子コンポーネント関数にアクセスする方法

Question

React用のドキュメントは、親コンポーネントがrefを介してコンポーネント関数にアクセスできるようにします。参照してください：https://facebook.github.io/react/tips/expose-component-functions.html

私のアプリケーションでこれを使用しようとしていますが、子関数が呼び出されたときに "未定義関数ではありません"というエラーが発生します。私はこれがReactクラスのためにES6フォーマットを使用することと何か関係があるのだろうかと思っています。なぜなら私のコードとドキュメントの間に他の違いは見られないからです。

私は以下の擬似コードのようなダイアログコンポーネントを持っています。ダイアログには、子コンテンツコンポーネントのsave（）関数を呼び出す必要があるsave（）を呼び出す「保存」ボタンがあります。コンテンツコンポーネントは、子フォームフィールドから情報を収集し、保存を実行します。

class MyDialog extends React.Component { 
    save() { 
    this.refs.content.save();     <-- save() is undefined 
    } 

    render() { 
    return (
     <Dialog action={this.save.bind(this)}> 
     <Content ref="content"/> 
     </Dialog>); 
    } 
} 

class Content extends React.Component { 
    save() { 
    // Get values from child fields 
    // and save the content 
    } 
} 

私が代わりにコンテンツまで小道具（saveOnNextUpdate）を渡すと、それが真である時はいつでもセーブ実行が、私はむしろ仕事に上記リアクトドキュメントで詳細な方法を取得する方法を見つけ出すだろうことができます。

docアプローチを使用して子コンポーネントの機能を別の方法で使用またはアクセスする方法に関するアイデアはありますか？

Answer 1

明らかに、m90は正しかった - これはまったく別の問題でした。誰かが同じ問題に遭遇した場合に備えて、私はこのソリューションを投稿しています。

私のアプリケーションはReduxで構築されており、問題はreact-redux connect関数を使用してコンポーネントをストア/グローバル状態に接続することに起因します。何らかの理由で、コンポーネントをエクスポートしてストアに接続すると、コンポーネント内の関数にアクセスできなくなります。これを回避するために、グローバル状態のすべての使用をコンテンツから削除して、それを「ダム」コンポーネントとしてエクスポートできるようにしなければなりませんでした。

より明確にするために、Content.jsはこのように見えた：

var connect = require('react-redux').connect; 

class Content extends React.Component { 
    save() { 
    // Get values from child fields 
    // and save the content 

    // Use of this.props.stateObject 
    } 
} 

function mapStateToProps(state) { 
    const { 
    stateObject 
    } = state; 

    return { 
    stateObject 
    }; 
} 

module.exports = connect(mapStateToProps)(Content); 

は、グローバル状態の使用を削除する（したがって、接続とmapStateToPropsの使用は、私が使用してコンポーネントをエクスポートすることができ：

module.exports = Content; 

this.refs.content.saveへのアクセス

は（）魔法これをやった後に働いた。

Answer 2

Reduxの接続は、前後のパラメータとしてオプションparametreを受け入れる。このオペアンプでフラグをtrueに設定することができます。次に、getWrappedInstance（）を使って、refへの関数にアクセスすることができます。このように：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

リファレンスの使用については、この記事を読んで価値を、より良いアプローチがあるかどう考えてみます：

class MyDialog extends React.Component { 
    save() { 
    this.refs.content.getWrappedInstance().save(); 
    } 

    render() { 
    return (
     <Dialog action={this.save.bind(this)}> 
     <Content ref="content"/> 
     </Dialog>); 
    } 
} 

class Content extends React.Component { 
    save() { ... } 
} 

function mapStateToProps(state) { ... } 

module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content); 

ここでそれについての詳細を読むこれを行うには、https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

Answer 3

別の方法がするだろう他の小物名（ref以外）を使用してください。あなたが接続されてMyComponentに例えばstyled-componentsまたはemotionのようなライブラリを使用している場合、これもうまく機能することを、私を見つけた：

<MyComponent 
    ... 
    innerRef={(node) => { this.myRef = node; }} 
/>