【学】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 ...
随机推荐
- C#正则表达式匹配字符串
正则表达式可以快速判断所给字符串是否某种指定格式.这里将一些常用的方法封装进一个字符串工具类中. public static class StringTool { /// <summary> ...
- CSS的重要性
自己很喜欢查看设计出彩的网页,在CSS Zen Garden选择了一个颜色搭配亮眼.结构错落的网页,照着原页面自己写了一个出来.之前做页面的时候总是会把原页面和自己做的放到PS里一个像素一个像素对比查 ...
- JAVA(2)
java面向对象编程的四大特征: 1.抽象 2.封装 3.继承 4.多态 封装 //职员 class Clerk { public String name; //private私有的 private ...
- Isostorespy 数据库无法打开的解决方案
重装Sql Server Compact http://download.microsoft.com/download/0/9/D/09D6ECB6-7F46-4B93-BB45-586A30A778 ...
- asp.net fileupload上传大文件时提示404.13错误
IIS 7 默认文件上传大小时30M 要突破这个限制,需要做如下操作: 1. 修改IIS的applicationhost.config 打开 %windir%\system32\inetsrv ...
- Python 基礎 - 字典的操作使用
接下來介紹字典,這在未來工作上,會是很常使用的,就來好好了解一下唄- 字典是一個 key(鍵)-value(值) 的數據類型,可以儲存很多訊息 #!/usr/bin/env python3 # -*- ...
- vconfig使用帮助
====================================================== VCONFIG(8) ...
- 当padding,margin,top为百分比值,具体数值如何计算
padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...
- function中的ajax怎么返回一个数
- 浏览器功能记住账号和密码解决方法(HTML解决方式)
1.在input标签里应用html5的新特性autocomplete="off" 注:对chrome不管用.其他浏览器没试. 2.如果是一个输入框那就在当前input标签后面(一 ...