react插槽

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'))