react父子组件

谁用谁 谁就是父组件

若是用在 原生html标签上的事件 都是react规定好的事件 on驼峰事件名
若是用在 组件身上的事件 都是自定义事件

父组件向子组件传参:

• 在父组件中添加 子组件
• 子组件中写入行内属性
• 子组件再通过this.props接收参数

子组件向父组件传参:

• 在父组件中添加 子组件
• 父组件添加一个自定义事件并且绑给 子组件
• 子组件也添加一个自定义事件 通过this.props. 接收到 父组件传过来的自定义事件 然后再赋值传递回去

import React from 'react';
import reactDOM from 'react-dom';

// 若是用在 原生html标签上的事件 都是react规定好的事件   on驼峰事件名
// 若是用在 组件身上的事件 都是自定义事件

// 孙子组件
class Button extends React.Component {
    render() {
        console.log(this.props);
        let { aaa, n } = this.props
        return <>
            <button onClick={() => { aaa(n + 1) }}>+</button>
            <button onClick={() => { aaa(n - 1) }}>-</button>
        </>
    }
}

// 子组件
class Child extends React.Component {
    state = {
        name: "清欢"
    }
    change() {
        this.props.myChange(666)
    }
    render() {
        console.log(this.props);
        let { qqq, myChange } = this.props
        let { name } = this.state
        return <div className="child">
            <h1>{name}</h1>
            <h2>{qqq}</h2>
            <button onClick={() => { this.change() }}>点击</button>
            {/* <button onClick={() => { myChange(qqq + 1) }}>+</button>
            <button onClick={() => { myChange(qqq - 1) }}>+</button> */}
            <Button aaa={myChange} n={qqq} />
        </div>;
    }
}

// 父组件
class Parent extends React.Component {
    state = {
        age: 100
    }
    myc(n) {
        console.log(n);
        this.setState({
            age: n
        })
    }
    render() {
        let { age } = this.state
        return <div className="parent">
            <h1>{age}</h1>
            <Child qqq={age} myChange={(n) => { this.myc(n) }} />
        </div>;
    }
}

reactDOM.render(<>
    <Parent />
</>, document.querySelector('#root'))