【学】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 ...
随机推荐
- HBASE学习笔记-初步印象
HBASE概念: HBASE是一个分布式架构的数据库,通过对数据进行多层的分块打散储存.从而改写传统数据库的储存能力和读取速度. HBASE的集群服务器: HBASE的集群主要分为Zookeeper集 ...
- 07——为多态基类声明为virtual析构函数
当基类确定被继承的时候,析构函数声明为virtual是必须的 当返回的派生类的指针或引用的时候,调用析构函数容易发生内存泄漏 当基类作为抽象类使用,声明pure virtual析构函数 析构函数的顺序 ...
- 关于JavaScript 中的变量
JS的变量声明语句永远是在其作用域中最先执行的,不论其定义的位置在哪里: 函数体内部,局部变量的优先级比同名的全局变量高. Javas作用域分类 未使用var定义的变量不论定义在什么位置都是全局变量, ...
- Unity3D-ScrollRect 各参数的代码引用以及作用
版本Unity4.6: 以下为ScrollRect面板上各选项 对应 在代码里的属性: content(RectTransform): scrollRect的RectTransform组件,即滑动面板 ...
- span标签设置margin-top没有效果
<span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即 ...
- 前端:js
JavaScript: 参考文章: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyifeng. ...
- mysql 内存相关文章
简单计算:http://www.mysqlcalculator.com/ 相关文档:http://mingxinglai.com/cn/2016/04/mysql-memory-usage-formu ...
- 图片在ie8浏览器打不开,其他浏览器都可以打开的问题
问题描述: 1.图片在IE8浏览器打不开,但是IE8以上及其他浏览器均可以打开: 2.同一网站,其他图片可以在IE8浏览器打开 解决办法: 1.图片的颜色模式是CMYK模式,应改为RGB模式 2.修改 ...
- 请求网络get
package com.baidu.net; import java.io.IOException; import org.apache.http.HttpEntity;import org.apac ...
- android中加载的html获取的宽高不正确
wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...