react父子组件之间传值简述（近期学习心得）

前言&＃xff1a;react中的数据流动有很好的解决方案&＃xff1a;redux&＃xff0c;但是redux对于初学者来说学习曲线比较陡&＃xff0c;并且在小型项目不太适用&＃xff0c;开发维护成本都比较高&＃xff0c;所以这里我只说单独用react的情况下组件之间传值的用法&＃xff0c;自学的&＃xff0c;有不足烦请大神指正。

父组件传递给子组件&＃xff1a;
核心思路就是将父组件中的state传递给子组件

以上就是父组件传值给子组件

现在的项目开发过程中&＃xff0c;大多数的子组件是需要有一些数据上的操作的&＃xff0c;比如input中的输入、checkbox的选中与取消选中等&＃xff0c;这样的情况下就需要将子组件的数据回传给父组件&＃xff0c;应用redux的话&＃xff0c;可以通过store统一管理分发数据&＃xff0c;单独用react也是可以实现的

子组件传值给父组件&＃xff1a;
总体思路就是父组件与子组件统一管理父组件中的state&＃xff0c;父组件将state传递给子组件&＃xff0c;子组件通过onChange将数据回传给父组件的state

父组件代码&＃xff1a; class Father extends React.Component {constructor(props){super(props);// 父组件的statethis.state &＃61; {menu:[]}}componentDidMount() {// 这里可以发ajax请求去后端请求数据通过setState将值保存到自己的state中// 假定data为后端请求回来的数据var data &＃61; [];this.setState({menu: data})}// 子组件触发参数就是子组件回传回来的一些数据ChildrenFunc(data,value,key){// 拿到当前组件的statelet menu &＃61; this.state.menu;// 遍历当前state&＃xff0c;遍历过程中可以对state中的值进行修改for(let i &＃61; 0; i {$this.ChildrenFunc(data,value,position)}}/>})})} } export default Father;子组件代码&＃xff1a; class Children extends React.Component {// 子组件状态改变就会触发父组件传递过来的onUpdata方法&＃xff0c;可以进行一系列的传值&＃xff0c;比如将输入值传递回去等ChildrenChange(event,value,position){this.props.onUpdata(event.target.value,value,position);}render(){// 这里的data就是父组件传递过来的值var data &＃61; this.props.data;return(// 这里就可以通过将data中的值渲染到子组件中 {this.ChildrenChange(event,"end",data.key)}} type&＃61;"text" value&＃61;{data.value}/>{data.value})} }

以上就是子组件传值给父组件的实现方式&＃xff0c;父组件中更进一步操作&＃xff08;例如提交数据&＃xff09;就可以通过自身state中的值来进行提交
例如&＃xff1a;

父组件中提交数据&＃xff1a; addData(){// 获取statelet menu &＃61; this.state.menu;// 遍历state 将我们要的数据取出来var newArray &＃61; [];for(let i &＃61; 0; i }

以上是最近学习所得&＃xff0c;如有错误烦请指正&＃xff0c;不胜感激&＃xff01;