How to share data within react components-JS Tutorial-php.cn

How to share data within react components

php中世界最好的语言

Release： 2018-06-09 11:59:10

Original

1742 people have browsed it

This time I will show you how to share data in react components, and what are the precautions for sharing data in react components. The following is a practical case, let's take a look.

Use react-redux to realize data sharing between react component data

1. Install react-redux

$ npm i --save react-redux

Copy after login

2. Import from react-redux The Proper component assigns the store to the Provider's store attribute, and

wraps the root component with the Provider.

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

Copy after login

In this way, all sub-components in the root component can obtain the value in the store

3.connect secondary encapsulation of the root component

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

Copy after login

connect receives two functions as parameters , a mapStateToProps defines which store properties will be mapped to properties on the root component (pass the store into the react component), and a mapDispatchToProps defines which actions can be used as root component properties (pass the data from the react component into the store)

3. Define these two mapping functions

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

Copy after login

Map the name and pass in the store to the name and pass attributes of the root component.

actions is an object that contains the action construction function. Use bindActionCreators to bind the object actions to the actions attribute of the root component.

4. Use <Show name={this.props.name} pass={this.props.pass}></Show>## where the root component refers to the sub-component. #Transfer store data into the subcomponent.

5. Call the methods in actions in the subcomponent to update the data in the store

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

Copy after login

First pass actions as attributes into the subcomponent

The subcomponent calls the method in actions to create the action

//Input组件
export default class Input extends React.Component{
sure(){
this.props.actions.add({name:this.refs.name.value,pass:this.refs.pass.value})
}
 render(){ 
  return (
    <p> 
  姓名:<input ref="name" type="text"/>
  密码:<input ref="pass" type="text"/>
  <button onClick={this.sure.bind(this)}>登录</button>
 </p>
  )
 }
}

Copy after login

Because we use the bindActionCreators function, store.dispatch(action) will be automatically called immediately after creating the action to update the data to the store.

In this way, we use the react-redux module to complete data sharing between various react components.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!