React コンポーネント内でデータを共有する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-06-09 11:59:10

オリジナル

1817 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。