2020-09-27

let { childclick } = this.props;这是个啥意思呢？

我是在看一篇关于讲解react中的父子之间通信方式的文章时被卡住的，

文章地址：https://blog.csdn.net/EcbJS/article/details/104664554

百度无果，终于在请教师傅之后，明白了。这是es6中的知识（没学过的我躲在角落瑟瑟发抖~），let { childclick } = this.props;这段代码从多个对象中取出了一个（这里就是取出的childclick）,this.props的多个对象就是从父组件传到子组件的

childData={this.state.inputValue}

childClick={this.onClick}

然后我们就可以执行子组件中的childClick()，父组件有childClick={this.onClick}，所以就可以在子组件使用onClick = () => { console.log('父组件事件触发'); }

父组件：

class TodoList extends Component {
   constructor(props) {
   	super(props);
   	this.state = {
   		inputValue: '传我，传我'
   	}
   }
   render() {
   	return (
   			<div onClick={this.onClick}>点击触发</div>
   			<Children
   				childData={this.state.inputValue}
   				childClick={this.onClick}
   			/> //Children是子组件的名称，childData是自己起的名字，inputValue是父组件state中定义的状态
   		)
   }
   onClick = () => {
   	console.log('父组件事件触发');
   }
export default TodoList;

子组件部分代码：

render() {
		return (
			<div onClick={this.handleClick}>
				点击触发
			</div>)
	}
	handleClick() {
		let { childClick } = this.props;
		childClick()
	}