怎么在React中实现父组件和子组件的数据传输

怎么在React中实现父组件和子组件的数据传输？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

一、父组件向子组件传递数据

父组件向子组件传递数据是通过在父组件中引用子组件时，在子组件标签设置传输数据的属性；而子组件中通过 this.props 接受传过来的数据；这样就实现了父组件向子组件的数据传输。

1.1、父组件代码

import React, { Component } from 'react'; import './App.css'; import Child from './child' class App extends Component {     constructor(props){         super(props);         this.state={             msg:'父类的消息',             name:'John',             age:99         }     }     callback=(msg,name,age)=>{         // setState方法,修改msg的值,值是由child里面传过来的         this.setState({msg});         this.setState({name});         this.setState({age});     }   render() {     return (       <div className="App">         <p> Message: {this.state.msg}</p>         <Child callback={this.callback} age={this.state.age}  name={this.state.name}></Child>       </div>     );   } } export default App;

代码说明：父组件在使用子组件（Child）的过程中，对子组件传输了两个属性（age和name）和一个方法(callback 先不考虑)。

关键代码：

<Child name={this.state.name} age={this.state.age}></Child>

1.2、子组件代码

import React from "react"; class Child extends React.Component{     constructor(props){         super(props);         this.state={             name:'Andy',             age:31,             msg:"来自子类的消息"         }     }     change=()=>{         this.props.callback(this.state.msg,this.state.name,this.state.age);     }     render(){         return(             <div>                 <div>{this.props.name}</div>                 <div>{this.props.age}</div>                 <button onClick={this.change}>点击</button>             </div>         )     } } export default Child;

代码说明：子组件中在 render 中直接使用 this.props 接受父组件传输的数据，并直接使用。不推荐子组件将接受到的数据，再使用this.setSate 方式处理。

关键代码：

<div>{this.props.name}</div> <div>{this.props.age}</div>

二、子组件向父组件传输数据

React 框架中子组件向父组件传输数据，要依赖于父组件向子组件传输数据。实际上就是父组件将自己作用域的函数传输给子组件；子组件调用该函数，并将要传输的数据，通过函数的参数的形式，传输给父组件。

2.1、父组件代码

上面的代码示例中，父组件中定义了函数，并将这个函数传输给了子组件。

class App extends Component { ......     callback=(msg,name,age)=>{         // setState方法,修改msg的值,值是由child里面传过来的         this.setState({msg});         this.setState({name});         this.setState({age});     }   render() {     return (       <div className="App">         <Child callback={this.callback}></Child>       </div>     );   } } export default App;

父组件将自己作用域的函数传递给子组件，子组件在通过 this.props 调用此函数的过程中，通过参数的方式将数据传输到组组件中。
这里父组件有三个形参：msg,name,age；子组件将数据传输过来后，父组件会将其使用 this.setState 方式处理。

2.2、子组件代码

子组件通过使用 this.props 接受到父组件传输过来的函数；并调用此函数通过参数的方法，传输数据给父组件。

class Child extends React.Component{ ......     change=()=>{         this.props.callback(this.state.msg,this.state.name,this.state.age);     }     render(){         return(             <div>                 <button onClick={this.change}>点击</button>             </div>         )     } } export default Child;

子组件中创建了一个方法 change()，此方法和点击事件 onClick 绑定；change() 方法中会调用 this.props.callback() 函数（父组件传输过来的函数）；函数的实参就是子组件传输给父组件的数据。

看完上述内容，你们掌握怎么在React中实现父组件和子组件的数据传输的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！