【学】React的学习之旅5-组件的嵌套
- 复习
[array].map(function(item,index){})
方法,传参里的函数需要有return
值,一般用map()
后都要用一个变量接一下,这个返回的还是一个数组,只是把每次遍历到的数组中的某一项调用函数进行处理里再放入新数组,就是那个变量的对应位置;这里用数组的for
循环遍历其实很不方便,因为数组中每一项都是一个对象,所以用map()
方法就非常方便 - 使用迭代器,比如
map()
方法时,要给每个遍历到后返回的元素添加一个唯一的key
值,否则,原来的版本会有警告,而现在的版本会直接报错react.js:18794 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
CommentList. See https://fb.me/react-warning-keys for more information.
解决方法是给Comment
标签一个key
值,附上每个元素的index
- 得到新的
commentsNode
其实是一个数组,数组中每个都是一个React
的组件对象,所以这个数组可以直接插入到return
函数里的div
中 - 通过
constructor()
的方式来设置组件的初始化状态,通过给this.state
直接赋值一个对象的方式,但是在这之前需要写super()
;老版本不写这句话没关系,但是在babel
中,需要加上这句继承父级的属性后,才能写自己的属性
var oWrap = document.getElementById('wrap');
class Comment extends React.Component {
render(){
return (
<div>
<div className="comment-body">
{this.props.children}
</div>
<div className="comment-author">
-{this.props.author}
</div>
</div>
);
}
}
class CommentForm extends React.Component {
render(){
return (
<div>
CommentForm
</div>
)
};
}
//var comments = [
// {author:'Victor',content:'This is my comment111!'},
// {author:'Mary',content:'This is my comment222!'},
// {author:'Qingyu',content:'This is my comment333!'}
//];
class CommentList extends React.Component {
render(){
var commentsNode = this.props.comments.map(function(item,index){
return <Comment key={'comment-'+index} author={item.author}>{item.content}</Comment>
});
//1). 复习 [array].map(function(item,index){})方法,
//2). 使用迭代器,比如map()方法时,要给每个遍历到后返回的元素添加一个唯一的key值,解决方法是给Comment标签一个key值,附上每个元素的index
//3). 得到新的commentsNode其实是一个数组,数组中每个都是一个React的组件对象,所以这个数组可以直接插入到return函数里的div中
return (
<div>
{commentsNode}
</div>
);
};
}
class CommentBox extends React.Component {
constructor(){ //通过constructor()的方式来设置组件的初始化状态,
super();//在babel中,需要加上这句继承父级的属性后,才能写自己的属性
this.state = {
comments:[] //初始化时comments为空数组,程序最后会调用一次setState来让它等于那个全局变量的comments数组,从而把它传递给子组件CommentList的comments属性中,一旦这个属性被赋予了一个数组,我们就可以用map来遍历,当然实际运用中我们会用ajax的方式获取数据后赋给这个数组
};
}
render(){
return (
//让CommentList的comments属性根据组件对象的state中comments的变化而变化,而同时CommentsList组件在上面已经写了,props的comments的变动有会和CommentList里读取数据处理后渲染后输出commentsNode
<div>
<h1>Comment Box!!!</h1>
<CommentList comments={this.state.comments} />
<CommentForm />
</div>
);
}
}
var box = ReactDOM.render(
<CommentBox />,
oWrap
);
//其实这时的box就是一个CommentBox组件对象,里面的state也是一个对象,我们可以通过setState来设置box,也就是CommentBox组件对象实例的状态,状态中的comments被赋值comments那个全局数组
box.setState({
comments:comments
})
console.log(box)
【学】React的学习之旅5-组件的嵌套的更多相关文章
- 【学】React的学习之旅6-组件的嵌套2
<input type=text placeholder='aaa'>, placeholder属性是定义文本框在没有输入值之前显示的一段灰色提示 ()=>{}箭头函数在ECMA6里 ...
- 【学】React的学习之旅1
React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...
- 【学】React的学习之旅7-官方例子总结
如果在标签里有注释,除了使用/**/之外,如果写在子标签中,外面还需要用{}包起来,指明这段是javascript代码,否则这段注释会直接显示在页面上,例如 render:function (){ r ...
- 【学】React的学习之旅4-添加事件(onChange)
实现联动绑定,在文本框中输入内容的同时,后面的span里内容跟着一起变化: onChange(),一旦触发一次变动,就执行某个函数: 既然已经在getInitialState属性里申明了一个变量inp ...
- 【学】React的学习之旅3 - 添加事件(onClick)
button除了用<input type="button">之外,还可以直接用<button></button>来创建,而2个标签的中间的内容就 ...
- 【学】React的学习之旅2 - React Component的生命周期
分成三个状态: Mounted Update Unmounted Mounted:当我们看到组件在浏览器中从无到有的效果的时候,mounted已经结束了,这个组件已经被mounted了 有这个阶段有2 ...
- 从零学React Native之09可触摸组件
可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. Touc ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
随机推荐
- Spring面向切面之AOP深入探讨
Spring之AOP深入探讨 刚接触AOP之前我已经找了网上各种博客论坛上的关于AOP的文章利于我理解因为听好多人说AOP很复杂,很深奥当我接触之后发现根本不是那么的难于理解.它只是一个基于OOP技术 ...
- 调用接口传递的XML 及排查原因
2fq3ej15nv8fgns30firbqtlo3 <Interface type="edit" model="object" value=" ...
- WP8 MediaElement 实现循环播放
很简单, 直接在MediaEnded事件里加Play()即可
- re模块详解
#!/usr/bin/env python #-*- coding:UTF-8 -*- ##################################################### # ...
- (原创)MongoDB之NoSQL简介
Nosql简介1.1系统对数据的需求 Nosql[Nosql主要用途大数据处理]的全称为”not only sql”,为非关系型数据库[非关系型数据库就是关系型数据库的所有特点都没有了, ...
- IONIC 开发的Android应用程序签名(或重新签名)详解
完全通过DOS命令来完成apk签名 给apk签名一共要用到3个工具,或者说3个命令,分别是:keytool.jarsigner和zipalign,下面是对这3个工具的简单介绍: ...
- Ported my old SPH solver in Unity
Here is the link to the web player version, http://www-scf.usc.edu/~taian/pages/sph/builds/12212014/ ...
- MySQL, 创建一个只读用户和一个所有权限用户
安装pasa需要配置mysql.基本知识学习一下 http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html MySQL 为关系型数据库 ...
- GPU 加速NLP任务(Theano+CUDA)
之前学习了CNN的相关知识,提到Yoon Kim(2014)的论文,利用CNN进行文本分类,虽然该CNN网络结构简单效果可观,但论文没有给出具体训练时间,这便值得进一步探讨. Yoon Kim代码:h ...
- 关于一个通俗易懂的FFT的C语言实现教程
找到一个通俗易懂并且神奇并且有趣的FFT算法C语言实现教程:http://www.katjaas.nl/FFTimplement/FFTimplement.html 只要对矩阵比较熟悉就能在教程的辅助 ...