活动介绍

react不同组件通信1

preview
试读
15页
javascript
网络
react.js
需积分: 0 0 下载量 135 浏览量 更新于2022-08-08 收藏 144KB DOCX 举报
react不同组件通信1
React 组件之间传值
标签： React 组件传值交互
2016-03-21 10:07 9554 人阅读 评论(0) 收藏 举报
本文章已收录于：
React 知识库
分类：
>>React
（39）
目录(?)[+]
前言
今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇
到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道，我翻译可
能不会按部就班，会尽可能用中文的意思，来将作者要讲述的技术描述清楚。英文能力有限，
如果有不对的地方请跟我留言，一定修改……^_^
原著序
处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就
是你。
我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。我下
面只专注于 React 组件本身的交流方式的讲解。
React 组件之间交流的方式，可以分为以下 3 种：
� 【父组件】向【子组件】传值；
� 【子组件】向【父组件】传值；
� 没有任何嵌套关系的组件之间传值（PS：比如：兄弟组件之间传值）
一、【父组件】向【子组件】传值
初步使用
这个是相当容易的，在使用 React 开发的过程中经常会使用到，主要是利用 props 来进
行交流。例子如下：
// 父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: true
};
},
render: function() {
return (
<ToggleButton text="Toggle me" checked={this.state.checked}
/>
);
}
});
// 子组件
var ToggleButton = React.createClass({
render: function () {
// 从【父组件】获取的值
var checked = this.props.checked,
text = this.props.text;
return (
<label>{text}: <input type="checkbox" checked={checked} />
</label>
);
}
});
进一步讨论
如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过 props 传递值的
优势就不那么明显了。（PS：所以我建议尽可能的减少组件的层次，就像写 HTML 一样，
简单清晰的结构更惹人爱）
// 父组件
var MyContainer = React.createClass({
render: function() {
return (
<Intermediate text="where is my son?" />
);
}
});
// 子组件 1：中间嵌套的组件
var Intermediate = React.createClass({
render: function () {
return (
<Child text={this.props.text} />
);
}
});
// 子组件 2：子组件 1 的子组件
var Child = React.createClass({
render: function () {
return (
<span>{this.props.text}</span>
);
}
});

剩余14页未读，继续阅读

身份认证 购VIP最低享 7 折!
30元优惠券
资源推荐
资源评论
三更寒天
  • 粉丝: 2480
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源