import React from 'react';
import ReactDOM from 'react-dom';
/*
在vue中:
父传子 其实就是通过自定义属性 子组件通过props接收
子传父 其实就是通过自定义事件 子组件通过$emit触发父组件定义的事件 并且把子组件的数据
通过参数的方式给了父组件;
在react中:
父传子: 通过行内自定义属性 + this.props
子传父: 通过行内自定义属性(对应的是一个函数) + this.props
凡是用在组件上的属性 都是创造组件的那个人自己定义的
*/
class Button extends React.PureComponent{
add=()=>{
this.props.onClick(10)
}
minus=()=>{
this.props.onClick(-10)
}
render(){
console.log(this.props.qqq)
return <div>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
}
}
// PureComponent 和 Component 都是react的内置组件;但是前者的性能稍高(涉及到某个钩子函数)
class Show extends React.PureComponent{
// constructor(props){
// super(props)
// }
render(){
// 子组件可以通过 this.props 接过来这个对象
console.log(this.props)
return <div className={this.props.className}>
<h1>当前数字是{this.props.num}</h1>
</div>
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
count:100
}
}
changeCount(n){
this.setState({
count:this.state.count + n
})
}
render() {
let {count} = this.state;
return <div className=''>
{/* 把qqq:箭头函数 打包成一个对象传给了 Button组件对应的函数 */}
<Button onClick={(n)=>{this.changeCount(n)}}/>
<Show qqq={123} aaa={666} num={count} className='box'/>
{/* 把qqq:123 aaa:666 num:100 打包成一个对象 传给Show组件对应的函数 */}
</div>;
}
}
ReactDOM.render(<App/>,document.getElementById('root'))