用react-redux实现react组件之间数据共享
利用react-redux实现react组件数据之间数据共享1.安装react-redux import {Provider,connect} from 'react-redux' ReactDOM.render( <Provider store={store}> <Wrap/> </Provider>,document.getElementById('example')) 这样根组件中所有的子组件都可以获得store中的值 export default connect(mapStateToProps,mapDispatchToProps)(Wrap) connect接收两个函数作为参数,一个mapStateToProps定义哪些store属性会被映射到根组件上的属性(把store传入react组件),一个mapDispatchToProps定义哪些行为action可以作为根组件属性(把数据从react组件传入store) function mapStateToProps(state){ return { name:state.name,pass:state.pass } } function mapDispatchToProps(dispatch){ return {actions:bindActionCreators(actions,dispatch) } } 把store中的name,pass映射到根组件的name,pass属性。 5.在子组件中调用actions中的方法来更新store中的数据 <Input actions={this.props.actions} ></Input>
//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 ( <div> 姓名:<input ref="name" type="text"/> 密码:<input ref="pass" type="text"/> <button onClick={this.sure.bind(this)}>登录</button> </div> ) } }
这样我们就利用react-redux模块完成了react各个组件之间数据共享。跟上篇文章一样,实现了在一个组件Input中通过actions更新数据到store,然后在另一个组件Show中展示store中的数据 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |