组件嵌套:将子组件以标签的形式写在父组件的模板中。

组件之间的通信

子传父

子传父

通过函数层层传递

 react中的组件嵌套

 

 

 react中的组件嵌套

 

 

点击h3 执行fn fn中去执行onlick函数而onlick是来自于props的,props中的onlick又是ff,转移去执行ff把参数赋给a 修改了a的值。

父传子

 

.使用props传值

 

具体实现

 

import React, { Component } from 'react';

/**父组件 */
export default class Parent extends Component {
    state = {
        msg: 1
    }
    render() {
        return (
            <div onClick={() => this.setState({ msg: this.state.msg + 1 })} >
                {/* 子组件 */}
                <Child msg={"传递给子组件的消息:" + this.state.msg.toString()} />
            </div>
        );
    }
}

/**子组件 */
class Child extends Component {
    // 默认的props 可写可不写
    static defaultProps = {
        msg: 1
    }
    render() {
        return (
            <div>
                {/* 通过props传递过来的参数 */}
                {this.props.msg}
            </div>
        )
    }
}

react中的组件嵌套

 

相关文章:

  • 2021-12-27
  • 2021-09-27
  • 2022-01-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-06
猜你喜欢
  • 2022-01-27
  • 2021-07-08
  • 2021-06-25
  • 2021-07-28
  • 2022-12-23
  • 2021-12-02
  • 2022-12-23
相关资源
相似解决方案