2017-12-14 38 views
0

要件は、他のコンポーネントからアクセス可能なメソッドを持つコンポーネントを作成し、他のコンポーネントから警告メッセージを送信できるようにすることです。反応成分のメソッドのエクスポート

  1. 静 - React.createClassをかES6クラスの静的:

    (トースターのように)私たちは、以下の方法によりこれを行うことができます知っています。

  2. コンポーネントのrefを使用します。

これを達成する最も良い方法は何ですか?

+0

あなたがしようとしていることの簡単な例を教えてください(あるコード) – wgcrouch

+0

私は共有するコードがありませんが、たとえばトースターのようなものが必要です。 – ram1993

答えて

1

これは非常にファンキーに見えて、データダウンのアクション・アクト・アプローチに従わないでしょう。

代わりにレンダリング小道具を使用することもできます。

// App.jsx 
<AlertProvider> 
    {sendAlert => <Consumer onAlert={sendAlert} />} 
</AlertProvider> 


// AlertProvider.jsx 
export default class AlertProvider extends React.Component { 
    sendAlert(msg) { alert(msg); } 
    render() { 
    return this.props.children(this.sendAlert); 
    } 
} 


// Consumer.jsx 
export default function Consumer({ onAlert }) { 
    return <button onClick={() => onAlert('Boom!')} /> 
} 

をあなたはそれが世界的に利用できるようにする必要がある場合は、Reduxのようなものを使用することを検討してください。

+0

しかし、私はすべてのコンポーネントをプロバイダにラップし、それらにメソッドを渡す必要があります。 – ram1993

+0

同じように、複数の場所で同じインスタンスを使用する必要がある場合は、Reduxを参照してください。しかし、一般的には、それは正しいアプローチです。あなたは可能な限り明示的になりたい。 –

+0

しかし、私は自分のコンポーネントが還元に依存しないようにしたい。誰もがそれをインポートして使用できるようにします。 – ram1993