详解React 父组件和子组件的数据传输
在学习 React 框架组件间数据传输知识点前，我们需要先明确几点使用原则。
- React的组件间通讯是单向的。数据必须是由父级传到子级或者子级传递给父级层层传递。
- 如果要给兄弟级的组件传递数据，那么就要先传递给公共的父级而后在传递给你要传递到的组件位置。
- 这种非父子关系的组件间传递数据，不推荐使用这种层层传递的方式；而是选择使用维护全局状态功能模块（Redux）
一、父组件向子组件传递数据
父组件向子组件传递数据是通过在父组件中引用子组件时，在子组件标签设置传输数据的属性；而子组件中通过 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 父组件和子组件的数据传输的详细内容，更多关于React 父组件和子组件的数据传输的资料请关注脚本之家其它相关文章！
相关文章
React+Electron快速创建并打包成桌面应用的实例代码
这篇文章主要介绍了React+Electron快速创建并打包成桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了react实现阻止父容器滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家介绍了React Hooks闭包陷阱的深入探究，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例2023-06-06
这篇文章主要介绍了antd之RangePicker设置默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了React Native实现登录功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了React 实现车牌键盘的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
React自定义hooks同步获取useState的最新状态值方式
这篇文章主要介绍了React自定义hooks同步获取useState的最新状态值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
TypeScript 实际上就是具有强类型的 JavaScript,可以对类型进行强校验,好处是代码阅读起来比较清晰,代码类型出现问题时,在编译时就可以发现,而不会在运行时由于类型的错误而导致报错,这篇文章主要介绍了ReactJS中使用TypeScript的方法,需要的朋友可以参考下2024-04-04
最新评论