React コンポーネント内でデータを共有する方法

今回は、react コンポーネントでデータを共有する方法と、react コンポーネントでデータを共有する際の注意点について説明します。以下は実際のケースです。見てみましょう。

reactコンポーネントデータ間のデータ共有を実現するにはreact-reduxを使用します

1.react-reduxをインストールします

$ npm i --save react-redux

2.react-reduxから適切なコンポーネントをインポートし、プロバイダーのストア属性にストアを割り当てます

。 Provider を含むルート コンポーネントが終了します。

import {Provider,connect} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
 <Wrap/>
</Provider>,document.getElementById('example'))

このようにして、ルートコンポーネント内のすべてのサブコンポーネントはストア内の値を取得できます

3.connect ルートコンポーネントの二次カプセル化

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

connect はパラメータとして 2 つの関数を受け取ります。1 つの mapStateToProps はどのストア属性がマップされるかを定義しますコンポーネントのルート属性に (ストアを反応コンポーネントに渡す)、mapDispatchToProps でルート コンポーネントの属性として使用できるアクションを定義します (データを反応コンポーネントからストアに渡します)

3. これら 2 つのマッピング関数を定義します。

function mapStateToProps(state){
 return {
  name:state.name,
  pass:state.pass
 }
}
function mapDispatchToProps(dispatch){
 
 return {actions:bindActionCreators(actions,dispatch)
 }
}

ストアを入れます。 名前とパスは、ルートコンポーネントの名前とパス属性にマッピングされます。

actions は、アクション構築関数を含むオブジェクトです。bindActionCreators を使用して、オブジェクトのアクションをルート コンポーネントのアクション属性にバインドします。

4. ルート コンポーネントがサブコンポーネントを参照する場合は、

を使用してストア データをサブコンポーネントに渡します。<Show name={this.props.name} pass={this.props.pass}></Show>

5. サブコンポーネントのアクションでメソッドを呼び出し、ストア内のデータを更新します。

最初にアクションを属性として渡します サブコンポーネントを入力します

サブコンポーネントはアクション内のメソッドを呼び出してアクションを作成します

<Input actions={this.props.actions} ></Input>

bindActionCreators関数を使用しているため、アクションの作成直後にstore.dispatch(action)が自動的に呼び出され、データをストアに送信します。

このように、react を使用します。redux モジュールは、さまざまな React コンポーネント間のデータ共有を完了します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

白黒だけを残してJSを使用して画像を操作する

実際のプロジェクトでvueコンポーネントを使用する方法

以上がReact コンポーネント内でデータを共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。