客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、是什么我们将组件间通信可以拆分为两个词：
回顾Vue系列的文章，组件是 相比 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的，广义上，任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二、如何通信组件传递的方式有很多种，根据传送者和接收者可以分为如下：
父组件向子组件传递 由于 父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过
function EmailInput(props) {
return (
<label>
Email: <input value={props.email} />
</label>
);
}
const element = <EmailInput email="[email protected]" />;
子组件向父组件传递 子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值 父组件对应代码如下：
class Parents extends Component {
constructor() {
super();
this.state = {
price: 0
};
}
getItemPrice(e) {
this.setState({
price: e
});
}
render() {
return (
<div>
<div>price: {this.state.price}</div>
{/* 向子组件中传入一个函数 */}
<Child getPrice={this.getItemPrice.bind(this)} />
</div>
);
}
}
子组件对应代码如下：
class Child extends Component {
clickGoods(e) {
// 在此函数中传入值
this.props.getPrice(e);
}
render() {
return (
<div>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button 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 (
<div>
<SiblingA
count={this.state.count}
/>
<SiblingB
onClick={this.setCount}
/>
</div>
);
}
}
父组件向后代组件传递 父组件向后代组件传递数据是一件最普通的事情，就像全局数据一样 使用 通过使用
const PriceContext = React.createContext('price')
如果想要获取
class MyClass extends React.Component {
static contextType = PriceContext;
render() {
let price = this.context;
/* 基于这个值进行渲染工作 */
}
}
Consumer组件：
<PriceContext.Consumer>
{ /*这里是一个函数*/ }
{
price => <div>price：{price}</div>
}
</PriceContext.Consumer>
非关系组件传递 如果组件之间关系类型比较复杂的情况，建议将数据进行一个全局资源管理，从而实现通信，例如 三、总结由于 因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中 到此这篇关于React中组件之间通信的方式的文章就介绍到这了,更多相关React组件之间通信内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论