接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值

父组件

 import React, { Component } from 'react';
import Test from './component/test';
//声明welcome组件
class welcome extends Component {
//声明一个构造函数
constructor(props) {
super(props);
//this.state是定义组件状态,可理解为组件中的数据,好比Vue中的data
this.state = {
userName: '路飞',
userAge: 19
}
}
changUserName(){
//要修改this.state中的值,这是唯一的方法
this.setState({
userName: '路飞:海贼王的男人'
})
}
// react元素 一律写在render函数中
render() {
return (
<div>
{/* 在子组件中声明一个userName属性,将this.state.userName的值传递到子组件中 */}
<Test userName={this.state.userName} userAge={this.state.userAge}></Test>
{/* 声明一个点击事件后面跟着一个bind(this) 是为了解决this指向问题 ,改变this指向 */}
<button onClick={this.changUserName.bind(this)}>改变userName</button>
</div>
);
}
}
//最后一定要记住 向外输出
export default welcome;

子组件

 import React, { Component } from 'react';

 class test extends Component {
render() {
return (
<div>
<h1>海贼王</h1>
{/* 在子组件中用this.props接收父组件中传递过来的值 */}
{[this.props.userName, this.props.userAge]} {console.log(this.props)}
{/* 通过控制台打印,this.props是传递过来的是一个对象:{userName: "路飞", userAge: 19} */}
</div>
);
}
} export default test;
05-28 12:47