react父子组件传参

1.文件后缀是以 jsx结尾，首字母需大写

首先我们需要创建一个父组件及子组件，如下图：（函数组件）

在父组件中引入 子组件 并且使用，根据props的形式来进行传值

name address age 这三个属性就是要传递给子组件的值

2.函数父组件接收值

2.1 类父组件传递参数给子组件：

子组件传值给父组件：1.父组件先传递一个函数给子组件 2.子组件接收父组件传递过来的函数，并且进行调用传参

{/* 父组件传递了一个函数 callback1 给子组件 */}
  <ClassChiild isShow={true} food={['猪脚饭','律师费','西瓜']} callback1={toSon}></ClassChiild>

类子组件接收参数

// 类子组件
import React, { Component } from 'react'
class ClassChiild extends Component {
    // 构造器中通过形参props接受，非构造器中通过 this.props来接收
    constructor(props) {
        super()
        console.log('参数', props);
    }
    clickMe = () =>{
        // 调用父组件传递过来的函数，进行传参
        // this.props.callback(['西瓜', '荔枝'])
        this.props.callback1('周三')
    }
    render() {
        return (
            <div>
                我是类组件 子
                {/* 逻辑与的写法 前面表达式正确则执行后面的表达式 */}
                <p>{this.props.isShow && '我要显示'}</p>
                <p>{this.props.isShow ? '显示' : '隐藏'}</p>
                <ul>
                    {this.props.food.map((item, i) => {
                        return <li key={i}> {item}</li>
                    })}
                </ul>
                {/* 子向父传参的逻辑是： 先从父组件中传递一个函数过来，子组件接受函数并用形参的方式来传递参数 */}
                <button onClick={this.clickMe}>接受父组件传递过来的函数</button>

            </div>
        )
    }
}

export default ClassChiild