React组件传值

1.父传子

 1.父组件提供要传递的state数据

 2.给子组件标签添加属性，值为state中的数据

 3.子组件中通过props接收父组件中传递的数据

// 父组件
class Parent extends React.Component {
    state = { lastName: '我是要传递的数据' }
    render() {
        return (
            <div>
                传递数据给子组件： <Child name={this.state.lastName} />
            </div>
        )
    }
}

// 子组件
const Child = props => {
    console.log('子组件：', props);
    return (
        <div className="child">
            <p>子组件，接收到父组件的数据：{props.name}</p>
        </div>
    )
}

ReactDOM.render(<Parent />, document.getElementById('root'))

2. 子传父

思想：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

步骤：

1. 父组件提供一个回调函数（用于接收数据）

2. 将该函数作为属性的值，传递给子组件

3. 子组件通过props调用回调函数