目录一、父组件向子组件传递数据 1.1、父组件代码1.2、子组件代码二、子组件向父组件传输数据 2.1、父组件代码 2.2、子组件代码 在学习 React 框架组件间数据传输知识点前
在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则。
父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性;而子组件中通过 this.props 接受传过来的数据;这样就实现了父组件向子组件的数据传输。
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>
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 框架中子组件向父组件传输数据,要依赖于父组件向子组件传输数据。实际上就是父组件将自己作用域的函数传输给子组件;子组件调用该函数,并将要传输的数据,通过函数的参数的形式,传输给父组件。
上面的代码示例中,父组件中定义了函数,并将这个函数传输给了子组件。
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
方式处理。
子组件通过使用 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 父组件和子组件的数据传输的资料请关注编程网其它相关文章!
--结束END--
本文标题: 详解React 父组件和子组件的数据传输
本文链接: https://www.lsjlt.com/news/123328.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0