render函数中不能写 this.setState 会造成死递归
children 就是一个插槽 写法:{children}
console.log(children) 里面多项的时候才会输出一个数组
react 会把数组中的每一项 原封不动的显示出来
// 控制台的界面
{children: "+", aaa: ƒ}
{children: "我丢"}
{children: "-", aaa: ƒ}
import React from 'react';
import reactDOM from 'react-dom';
// render函数中不能写 this.setState 会造成死递归
// children 就是一个插槽
// react 会把数组中的每一项 原封不动的显示出来
class Button extends React.Component {
render() {
console.log(this.props);
let { children, aaa } = this.props
return <>
<button onClick={aaa}>{children}</button>
</>
}
}
class Parent extends React.Component {
state = {
age: 100
}
add() {
this.setState({
age: this.state.age + 1
})
}
minus() {
this.setState({
age: this.state.age - 1
})
}
render() {
let { age } = this.state
return < div className="parent" >
<h1>{age}</h1>
<Button aaa={() => { this.add() }}>+</Button>
<Button>我丢</Button>
<Button aaa={() => { this.minus() }}>-</Button>
</div >;
}
}
reactDOM.render(<>
<Parent />
</>, document.querySelector('#root'))