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

PascalXie 发布于2019-08-22 18:39 / 336人阅读

摘要：前言中的数据流动有很好的解决方案，但是对于初学者来说学习曲线比较陡，并且在小型项目不太适用，开发维护成本都比较高，所以这里我只说多带带用的情况下组件之间传值的用法，自学的，有不足烦请大神指正。以上是最近学习所得，如有错误烦请指正，不胜感激

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

父组件传递给子组件：
核心思路就是将父组件中的state传递给子组件

父组件代码：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父组件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 这里可以发ajax请求  去后端请求数据   通过setState将值保存到自己的state中
      // 假定data为后端请求回来的数据
      var data = [];
      this.setState({
          menu: data
      })
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            return 
          })}
      )
  }
}
export default Father;
子组件代码：
class Children extends React.Component {
    render(){
        // 这里的data就是父组件传递过来的值
        var data = this.props.data;
        return(
            
                
                  
                    // 这里就可以通过将data中的值渲染到子组件中
                    
                    {data.value}
                  
                
            
        )
    }
}

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

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

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

父组件代码：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父组件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 这里可以发ajax请求  去后端请求数据   通过setState将值保存到自己的state中
      // 假定data为后端请求回来的数据
      var data = [];
      this.setState({
          menu: data
      })
  }
  // 子组件触发   参数就是子组件回传回来的一些数据
  ChildrenFunc(data,value,key){
    // 拿到当前组件的state
    let menu = this.state.menu;
    // 遍历当前state，遍历过程中可以对state中的值进行修改
    for(let i = 0; i < menu.length; i++){
      if(key == menu[i].key){
        menu[i].value = data;
      }
    };
    // 将修改之后的值保存到当前组件的state中
    this.setState({
      menu: menu
    });
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            // onUpdata方法就是子组件状态改变时就会调用这个函数，通过这个函数子组件就会触发父组件的ChildrenFunc方法，从而达到修改state的功能
            return  {$this.ChildrenFunc(data,value,position)}}/>
          })}
      )
  }
}
export default Father;

子组件代码：
class Children extends React.Component {
    // 子组件状态改变就会触发父组件传递过来的onUpdata方法，可以进行一系列的传值，比如将输入值传递回去等
    ChildrenChange(event,value,position){
        this.props.onUpdata(event.target.value,value,position);
    }
    render(){
        // 这里的data就是父组件传递过来的值
        var data = this.props.data;
        return(
            
                
                  
                    // 这里就可以通过将data中的值渲染到子组件中
                     {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>
                    {data.value}
                  
                
            
        )
    }
}

以上就是子组件传值给父组件的实现方式，父组件中更进一步操作（例如提交数据）就可以通过自身state中的值来进行提交
例如：

父组件中提交数据：
addData(){
    // 获取state
    let menu = this.state.menu;
    // 遍历state   将我们要的数据取出来
    var newArray = [];
    for(let i = 0; i < menu.length; i++){
      if(menu[i].key == "某些我们需要的值"){
        newArray.push(menu[i].value);
      }
    };
    // 提交时的参数
    var data = {
        id: "xxxx",
        menu: newArray.join(",")
    }
    // 提交的ajax请求代码。。。。。
}

以上是最近学习所得，如有错误烦请指正，不胜感激！

GPU云服务器云服务器父子组件父子组件通信父子组件通讯父子组件-动态渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96048.html

es6语法的reactjs的state状态和组件间props传递的实践

摘要：目前只是体会到组件之间传递的值的初始来源一般都是值，可能是实践不够的原因。。。此时，可以建一个组件内部封装一个构造函数，内部封装三个方法。 PS：开头的一段废话想起一个月前还不知道reactjs该如何下手的而今天有点小体会，还是有点小欣慰，不过回望一些走过的坑和开始时的满头浆糊觉得还是有点恐怖的。今天分享一点实践中的小心得给新手朋友们。 reactjs的es6语法形式 ...

malakashi 2019-08-20 17:19 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

li21 2019-08-23 17:11 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

AaronYuan 2019-07-31 10:21 评论0 收藏0
React父子组件间的传值

摘要：父组件默认值默认值哈哈哈哈传值给子组件接受子组件的传值为子组件啦啦啦啦接受父组件传的值为传值给父组件父组件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

宠来也 2019-08-23 13:08 评论0 收藏0