React组件通信就是值组件通过某种方式来传递信息以达到某个目的

 方式：

父组件向子组件传递信息：由于react数据流动是单向的，父组件在调用子组件时，只需要在子组件标签内传递参数，子组件通过props属性接收

function EmailInput(props) {

return (

Email:

);

}

const element = ;

 

        2.子组件向父组件传递信息；父组件向子组件传递一个函数，然后通过这个函数的回调，拿到子组件传过来的值

父组件对应代码如下：

class Parents extends Component {

constructor() {

super();

this.state = {

price: 0

};

}

getItemPrice(e) {

this.setState({

price: e

});

}

render() {

return (

price: {this.state.price}

{/* 向子组件中传入一个函数 */}

);

}

}

子组件对应代码如下：

class Child extends Component {

clickGoods(e) {

// 在此函数中传入值

this.props.getPrice(e);

}

render() {

return (

);

}

}

兄弟组件之间的传递：父组件作为中间层来实现数据的互通，通过使用父组件传递

class Parent extends React.Component {

constructor(props) {

super(props)

this.state = {count: 0}

}

setCount = () => {

this.setState({count: this.state.count + 1})

}

render() {

return (

count={this.state.count}

/>

onClick={this.setCount}

/>

);

}

}

父组件向后代组件传值：使用context提供的组件通信的一种方式，可以实现数据的共享，Provider组件通过value属性传递给后代组件非关系组件传递数据：将数据进行一个全局的资源管理，从而实现组件间的通信功能，例如redux

总结：

父组件向子组件传递信息：由于react数据流动是单向的，父组件在调用子组件时，只需要在子组件标签内传递参数，子组件通过props属性接收子组件向父组件传递信息；父组件向子组件传递一个函数，然后通过这个函数的回调，拿到子组件传过来的值父组件向后代组件传值：使用context提供的组件通信的一种方式，可以实现数据的共享，Provider组件通过value属性传递给后代组件非关系组件传递数据：将数据进行一个全局的资源管理，从而实现组件间的通信功能，例如redux

参考链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。