react中组件之间的传值

1.父组件向子组件传值

• 父组件要提供想要传递给子组件的数据
• 给子组件添加属性。属性值为父组件中state中要传递的数据
• 子组件通过props接收父组件传递过来的数据

 关于父子组件之间的传递
// 父组件
// class Parent extends React.Component{
//     // 1.父组件中定义要传递的值
//     state={
//         name:'ww'
//     }
//     render(){
//         return (
//             <div>
//                 <p>这是父组件</p>
//                 {/* 2.将定义的值放在子组件中进行传递 */}
//                 <Child name={this.state.name} />
//             </div>
//         )
//     }
// }
// // 子组件
// // 3.在子组件中使用props接收父组件传递过来的值
// const Child=(props)=>{
// console.log(props);

//         return (
//         <div>这是子组件{props.name}</div>
//         )
//     }
// ReactDOM.render(<Parent />,document.getElementById("root"))

 2.子组件向父组件传值

• 利用回调函数，父组件提供回调函数，子组件进行调用，将子组件要传递的数据作为回调函数的参数进行传递
• 父组件提供回调函数
• 将回调函数作为属性值传递给子组件
• 子组件通过props接收传递的回调函数，并在子组件中进行调用传递过来的回调函数

/ 子组件向父组件传递数据
class Parent extends React.Component{
    state={
        msg:''
    }
//  1.在父组件中定义一个方法，作为属性传递给子组件,提供一个参数去接收传递过来的数据
getChildMsg=(data)=>{
console.log(data);
this.setState({
    msg:data
})

}
    render(){
        return (
            <div>
    <p>这是父组件{this.state.msg}</p>
                {/* 2.将定义的值放在子组件中进行传递 */}
                <Child  msg={this.getChildMsg}/>
            </div>
        )
    }
}
// 子组件

class Child extends React.Component{
   getMsg=()=>{
       // 3.在子组件中调用父组件传递过来的方法，并将传递的数据作为参数进行传递
        this.props.msg(123)
    }
    render(){
        return (
            <button onClick={this.getMsg}>这是子组件</button>
        )
    }
}

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

 3.兄弟组件之间传值

将共享状态（数据）提升到最近的公共父组件中，由公共父组件管理这个状态，这个状态称为状态提升

公共父组件的职责：1.提供共享状态，2.提供操作共享状态的方法

需要进行通讯的子组件只需要通过props接收状态和操作状态的我方法

class Parent extends React.Component{
提供想要改变的数据
state={
count:0
}
利用子组件2控制数值的增加，因此提供一个方法到子组件2中
addCount=()=>{
    this.setState({
        count:this.state.count++
})
}
    render(){
        return (
将数据作为属性值传递到子组件1中
            <Child01 count={this.state.count}/>
将控制数值的方法作为属性值传递到子组件2中
            <Child02 add={this.addCount}/>
)
}
子组件1
class Child01 extends React.Component{
    render(){
        return(
在子组件1中将传递的数值进行显示
                <p>计数器:{this.props.count}</p>
}
}
子组件2
class Child02 extends React.Component{
getAdd=()=>{
子组件2中调用父组件传递过来的方法
    this.props.add()
}
    render(){
        return(
子组件2中调用方法
               <button onClick={this.getAdd}> dianji </button>
}
}

这样父组件就通过子组件1管理数值的显示，子组件2管理数值的增加，就可以将子组件1和子组件2之间建立通信，实现兄弟组件之间数值的传递

大家一起加油学习React，程序员的世界真的很有意思，希望大家一起努力，不抛弃，不放弃。是我们的口号