react入门（5）
二十、父组件向子组件传递信息
案例22：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{background:red;}
</style>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 父组件
var Parent = React.createClass({
getInitialState: function () {
return {
checked: true,
class:'box'
};
},
render: function() {
return (
<Child txt="是否喜欢咖啡" class={this.state.class} checked={this.state.checked} />
);
}
}); // 子组件
var Child = React.createClass({
render: function () {
var checked = this.props.checked;
return (
<div className = {this.props.class}>
{this.props.txt}:
<input type="checkbox" checked={checked} />
</div>
);
}
}); ReactDOM.render(
<Parent />,
document.getElementById('example')
) </script>
</body>
</html>
效果图如下
分析如下
- 父元素Parent上在getInitialState里设置了两个初始值checked和class
- 父元素Parent的Child标签上有三个属性txt、class、checked。txt的属性值为“是否喜欢咖啡”；class的属性值是从getInitialState里获取的class的初始值，值为box；checked的属性值是从getInitialState里获取的checked的初始值，值为true。
- 子组件Child的checked这个变量的值，是从父组件Parent传递过来的，即为父组件Parent的Child标签上checked的属性值，即为true。
- 子组件Child的className的属性值，是从父组件Parent传递过来的，即为父组件Parent的Child标签上class的属性值，即为box。
- 子组件this.props.txt，是从父组件Parent传递过来的，即为父组件Parent的Child标签上txt的属性值，即为“是否喜欢咖啡”。
上面这个例子是父组件里面嵌套了一个子组件，当然我们子组件里面还可以嵌套孙子组件
案例23：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 父组件
var Parent = React.createClass({
getInitialState: function () {
return {
checked: true,
};
},
render: function() {
return (
<Child txt="是否喜欢咖啡" checked={this.state.checked} />
);
}
}); // 子组件
var Child = React.createClass({
render: function () {
return (
<div>
<Grandchild txt={this.props.txt} />
<input type="checkbox" checked={this.props.checked} />
</div>
);
}
}); // 孙子组件
var Grandchild = React.createClass({
render: function () {
return (
<label>
{this.props.txt}
</label>
);
}
});
ReactDOM.render(
<Parent />,
document.getElementById('example')
) </script>
</body>
</html>
效果如下
分析如下
从这个例子我们可以知道，信息可以从Parent一直传递到Grandchild上去，以此类推可以依次传递下去。但是，如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过 props 传递值的优势就不那么明显了。
二十一、子组件向父组件传值
案例24：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 父组件
var Parent = React.createClass({
getInitialState: function () {
return {
txt: 123
};
},
childChange: function (newState) {
this.setState({
txt: newState
});
},
render: function() {
return (
<div>
{this.state.txt}
<Child tab="输入框" txt={this.state.txt} callback={this.childChange} />
</div>
);
}
}); // 子组件
var Child = React.createClass({
getInitialState: function () {
return {
txt: this.props.txt
};
},
toChange: function (event) {
var newState = event.target.value;
this.setState({
txt: newState
});
this.props.callback(newState);
},
render: function () {
return (
<div>
<span>{this.props.tab}</span>
<input type="text" value={this.state.txt} onChange={this.toChange} />
</div>
);
}
}); ReactDOM.render(
<Parent />,
document.getElementById('example')
) </script>
</body>
</html>
效果如下
分析如下（文字结合图片一起看）
- 父组件Parent的Child标签上txt属性的值，是从getInitialState里设置的txt的值，即为123
- 子组件Child的span标签里{this.props.tab}，是获取的父元素Parent里传递过来的信息，即为父元素Parent的Child标签上tab属性的值，即为“输入框”。
- 子组件Child的input标签上value的值，是从getInitialState里设置的txt的值，这个txt的值为父元素Parent的Child标签上txt属性的值，即为123。
- 在子组件Child里，当input值发生改变的时候，就触发onChange事件，调用toChange方法。
- 在子组件Child的toChange方法里，event.target.value是input的value值，将input的value值赋值给newState这个变量；通过setState将txt的值修改为newState的值，即为input的value值；this.props.callback，这里向父元素的callback里传递了一个newState值，即为input的value值。
- 在父组件Parent的Child标签上，callback被触发后，会调用childChange方法，在这个方法里，通过setState将txt的值修改为子组件Child传递过来的newState值。
二十二、没有嵌套关系的组件之间传值
案例25：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Parent = React.createClass({
getInitialState: function() {
return {
txt: '123'
};
},
childOneCb:function(newOne){
this.setState({
txt:newOne
})
},
render: function () {
return (
<div>
<ChildOne txt={this.state.txt} cbOne={this.childOneCb} />
<ChildTwo txt={this.state.txt} />
</div>
);
}
}); var ChildOne = React.createClass({
getInitialState: function() {
return {
txt: this.props.txt
};
},
inputChange:function(event){
this.setState({
txt:event.target.value
});
this.props.cbOne(event.target.value);
},
render: function() {
return (
<div>
ChildOne：<input type="text" value={this.state.txt} onChange={this.inputChange} />
</div>
);
}
}); var ChildTwo = React.createClass({
render: function () {
return (
<div>
ChildTwo：{this.props.txt}
</div>
);
}
}); ReactDOM.render(
<Parent />,
document.getElementById('example')
) </script>
</body>
</html>
效果如下
分析如下
- 首先来看父元素Parent
- 接下来看ChildOne
cbOne在父组件Parent上ChildOne标签上看到
- 接下来再回到父组件Parent上
这个时候已经完成了在子组件ChildOne上修改input的value值，父组件Parent里txt的状态会随之改变
- 下面来看ChildTwo
父组件Parent里txt值随着子组件ChildOne里input值而改变，这里的值也是获取的父组件Parent里txt的状态。因此ChildTwo里的值也会随着ChildOne里的值而改变。
react入门（5）的更多相关文章
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门（2）
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- VB6.0 为批量字体改名
从网上下载了一个字符包,解压以后查看,发现文件名是这种形式:0120_XXXXXX_GBK.ttf,看上去很不雅观.我想改成 XXXXXX简体.ttf 这种形式,但字体有300多个,手动修改太浪费时间 ...
- 浅谈C#中常见的委托<Func,Action,Predicate>（转）
一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...
- DPC和ISR的理解
首先来说中断 计算机的中断分为软中断和硬中断,即IRQL和DIRQL,共32个级别,从0~31级别依次提升,0~2属于软中断 一般线程运行于PASSIVE_LEVEL级别,如果不想在运行时切换到其他线 ...
- Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...
- Mina入门实例（一）
mina现在用的很多了,之前也有用到,但是毕竟不熟悉,于是查了一些资料,做了一些总结.看代码是最直观的,比什么长篇大论都要好.不过其中重要的理论,也要理解下. 首先是环境,程序运行需要几个包,这里用m ...
- 每周一书《Oracle 12 c PL(SQL)程序设计终极指南》
本周为大家送出的书是<Oracle 12 c PL(SQL)程序设计终极指南>,此书由机械工业出版社出版, 孙风栋,王澜,郭晓惠 著. 内容简介: <Oracle 12c PL/SQ ...
- 用java开发微信公众号：测试公众号与本地测试环境搭建（一）
本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/5023678.html 俗话说,工欲善其事,必先利其器.要做微信公众号开发,两样东西不可少,那就是要有一 ...
- [Hadoop大数据]——Hive数据的导入导出
Hive作为大数据环境下的数据仓库工具,支持基于hadoop以sql的方式执行mapreduce的任务,非常适合对大量的数据进行全量的查询分析. 本文主要讲述下hive载cli中如何导入导出数据: 导 ...
- TSQL “匹配全部”语义的实现
在TSQL中,有exists子句表示存在,表示匹配任意一行数据,但是,如何表示匹配全部的数据行.例如,表示一个学生选修了所有课程,这就是“匹配全部”语义的一个经典实例. 示例,获取“选修全部”课程的学 ...