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'))
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值