app开发网站建设包含项目,网站开发保密合同范本,html菜鸟教程首页,中国十大网络营销平台#一、是什么
我们将组件间通信可以拆分为两个词#xff1a;
组件通信
回顾Vue系列 (opens new window)的文章#xff0c;组件是vue中最强大的功能之一#xff0c;同样组件化是React的核心思想
相比vue#xff0c;React的组件更加灵活和多样#xff0c;按照不同的方式可…#一、是什么
我们将组件间通信可以拆分为两个词
组件通信
回顾Vue系列 (opens new window)的文章组件是vue中最强大的功能之一同样组件化是React的核心思想
相比vueReact的组件更加灵活和多样按照不同的方式可以分成很多类型的组件
而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的广义上任何信息的交通都是通信
组件间通信即指组件通过某种方式来传递信息以达到某个目的
#二、如何通信
组件传递的方式有很多种根据传送者和接收者可以分为如下
父组件向子组件传递子组件向父组件传递兄弟组件之间的通信父组件向后代组件传递非关系组件传递
#父组件向子组件传递
由于React的数据流动为单向的父组件向子组件传递是最常见的方式
父组件在调用子组件的时候只需要在子组件标签内传递参数子组件通过props属性就能接收父组件传递过来的参数
function EmailInput(props) {return (labelEmail: input value{props.email} //label);
}const element EmailInput email123124132163.com /;#子组件向父组件传递
子组件向父组件通信的基本思路是父组件向子组件传一个函数然后通过这个函数的回调拿到子组件传过来的值
父组件对应代码如下
class Parents extends Component {constructor() {super();this.state {price: 0};}getItemPrice(e) {this.setState({price: e});}render() {return (divdivprice: {this.state.price}/div{/* 向子组件中传入一个函数 */}Child getPrice{this.getItemPrice.bind(this)} //div);}
}子组件对应代码如下
class Child extends Component {clickGoods(e) {// 在此函数中传入值this.props.getPrice(e);}render() {return (divbutton onClick{this.clickGoods.bind(this, 100)}goods1/buttonbutton onClick{this.clickGoods.bind(this, 1000)}goods2/button/div);}
}#兄弟组件之间的通信
如果是兄弟组件之间的传递则父组件作为中间层来实现数据的互通通过使用父组件传递
class Parent extends React.Component {constructor(props) {super(props)this.state {count: 0}}setCount () {this.setState({count: this.state.count 1})}render() {return (divSiblingAcount{this.state.count}/SiblingBonClick{this.setCount}//div);}
}#父组件向后代组件传递
父组件向后代组件传递数据是一件最普通的事情就像全局数据一样
使用context提供了组件之间通讯的一种方式可以共享数据其他数据都能读取对应的数据
通过使用React.createContext创建一个context const PriceContext React.createContext(price)context创建成功后其下存在Provider组件用于创建数据源Consumer组件用于接收数据使用实例如下
Provider组件通过value属性用于给后代组件传递数据
PriceContext.Provider value{100}
/PriceContext.Provider如果想要获取Provider传递的数据可以通过Consumer组件或者或者使用contextType属性接收对应分别如下
class MyClass extends React.Component {static contextType PriceContext;render() {let price this.context;/* 基于这个值进行渲染工作 */}
}Consumer组件
PriceContext.Consumer{ /*这里是一个函数*/ }{price divprice{price}/div}
/PriceContext.Consumer#非关系组件传递
如果组件之间关系类型比较复杂的情况建议将数据进行一个全局资源管理从而实现通信例如redux。
