14

モーダルと通知は、本文に追加されるコンポーネントです。そのため、通常のコンポーネントとは少し異なります。私のアプリでは、それらを実装する 2 つの方法を考えることができますが、どちらが優れているかわかりません。

  1. 店舗なし

このアプローチでは、create メソッドを持つ NotificationHelper クラスを作成します。その中で、新しいコンテナ ノードを作成し、それを本体に追加してから、React.render(, container); を呼び出します。

そのため、どのコンポーネントでも NotificationHelper.create() を呼び出すことができ、通知が作成されます。ライフサイクルを管理し、タイマーが切れるか誰かが閉じるボタンをクリックすると閉じる通知コンポーネント。

多くの場合、問題は XHR 応答 (成功または失敗) に応じてページに通知を表示する必要があるため、actionCreator では次のようなコードを作成します。

APIManager.post(url, postData).then(function(response) {
    NotificationHelper.create(<SuccessNotification />)
});

新しいコンポーネントをレンダリングするアクションクリエーターからこのようなものを呼び出すのが正しいかどうかはわかりません。

  1. 店舗あり

もう 1 つの方法は、NotificationStore を作成し、emitChange で通知コンポーネントをレンダリングすることです。コードは次のようになります

私のApp.jsでは、コードは次のようになります

<body> 
    <Header />
    <Fooder />
   <NotificationContainer />
</body>

そして、NotificationContainer で、次のようなことを行います

onChange: function() {
    this.setState({customNotification: NotificationStore.get()});
},
render: function() {
    <Notification>
        {this.state.customNotification}
    </Notification>
}

そして最後に、アクションクリエーターは次のようになります

Dispatcher.dispatch({
   actionType: 'notification',
   component:  <MyComponent/>
});

このアプローチの問題は、ストアの追加のオーバーヘッドです。Store はここで意味のあることを行っているわけではありません。流れに従うだけです。アクション クリエーターからストアにデータを渡し、コンポーネントがストアから同じデータを取得してレンダリングします。そのため、実際には何も得られずにフラックス サイクルを終了します。

また、この時点では通知がありませんが、アプリの開始時に NotificationContainer を初期化する必要があります。

4

2 に答える 2

1

あなたの問題がどのように問題なのか、私にはよくわかりません。本来の機能を正確に実行し、後でその上に構築する必要がある場合でも、簡単に構築できます。私の意見では、通知やその他の非真のコンポーネント所有者機能は、flux を使用する最良の理由の 1 つです (90% の確率で、flux はお勧めしません)。

フラックスを使用すると、通知アクションの作成者は、一定期間後に通知の削除アクションを作成する責任があります。通知にxボタンを配置することもできます。クリックするとそのアクションが作成され、アイテムが存在する場合は削除するストアに移動し、このストアの更新に依存するすべてのビューが表示されます。一部/すべてというのは、通知コンポーネントが非表示になっている可能性があること、またはアプリの 1 つのページに通知を表示する別の方法がある可能性があること、またはアプリ内の任意の場所に通知の数を示す単純なカウンターがある可能性があることを意味します。

補足: 複数回レンダリングできるような方法で要素を渡さないでください。{component: SuccessNotification, props: props}事前にコンポーネントを指定する必要がある場合は、代わりに渡します。

于 2014-12-18T02:39:54.427 に答える