相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在 子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由子组件向父组件传值,我之前学的都是类组件,后来公司是全面拥抱hooks的,所以,今天我把这两种方法都分享给大家
1,类组件
import React, { Component } from "react";
//定义父组件
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
name: "this is parent",
msg: "我是帅哥"
};
}
//定义一个方法
changeMsg = (x) => {
this.setState({
msg: x
});
};
render() {
return (
<div>
<h2>{this.state.name}</h2>
<h3>{this.state.msg}</h3>
<hr />
<Children changeMsg={this.changeMsg} />
</div>
);
}
}
//定义子组件
class Children extends Component {
constructor(props) {
super(props);
this.state = {
name: "this is child",
msg: "测试哈哈"
};
}
render() {
return (
<div>
<h2>{this.state.name}</h2>
<h2>{this.state.msg}</h2>
<button onClick={() => this.props.changeMsg(this.state.msg)}>
点击子组件改变父组件的值
</button>
</div>
);
}
}
按钮点击前后对比
2,hooks
import React, { useState } from "react";
//定义父组件
const App = () => {
const [sex, setSex] = useState('男')
return (
<>
<p>{sex}</p>
<Childer setSex={setSex} />
</>
);
};
//定义子组件
const Childer = (props) => {
const {setSex} = props
return (
<>
<h3>Childer</h3>
<button onClick={()=>setSex('女')}>点击改变性别</button>
</>
);
};
export default App;
其实通过对比大家就能够看出来,在state值较少的时候,函数式组件要比类组件轻量很多,也更容易阅读理解,好了,今天就分享这些,希望能够帮助大家,提前祝大家新年快乐呦!