27-React Lists and Keys
Lists and Keys
React支持以数组的形式来渲染多个组件,它会将你数组中的每个组件以列表的形式渲染开来。
当你使用数组的方式来渲染你的组件时,你需要给每个组件一个Key值,否则会出现一个警告,提示指出应该为列表的每一项提供一个属性key,如下代码所示:
function NumberList(props) {
const numbers = props.numbers;
const listItems = number.map(item => <li>{item}</li>);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
分配key后的代码如下:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
<li key={item.toString()}>
{item}
</li>
);
return (
<ul>{listItems}</ul>
)
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
Keys值帮助React确定哪些组件已经改变了,增加了或者被移除了。
const numbers =[1, 2, 3, 4, 5];
const listItems = numbers.map(item =>
<li key={item.toString()}>
{item}
</li>
);
数组中的每个组件都需要有一个确定的keys值,即一个确定的身份。
keys值最好是用字符串来做唯一标识符。我们通常用数据的ID来做主键。
Keys只用在有数组的上下文才有意义。
示例:key的错误用法
function ListItem(props) {
const value = props.value;
return (
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
// 这是错误的,这里应该设置上key
<ListItem value={item} />
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers}> />,
document.getElementById('root')
)
示例:key的正确用法
function ListItem(props) {
// 这才是正确的,在这里不需要设置key
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
// 这才是正确的,在这里设置key
<ListItem key={item.toString()} value={item} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
不同数组中可以用相同的key,但兄弟姐妹之间的键必须是唯一的。
Forms
表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
交互属性
表单组件支持几个受用户交互影响的属性:
- value:用于 、、 组件
- checked:用于类型为 checkbox 或者 radio 的 组件
- selected:用于 组件
注:在React中应当使用中的value值来代替中的selected属性。(虽然你也可以使用selected,但这样做的话你就需要将整个组件都重新渲染一遍)
在 HTML 中, 的值通过子节点设置;在 React 中则应该使用 value 代替。
表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时,onChange 执行并通过浏览器做出响应:
- 或 的 value 发生变化时。
- 的 checked 状态改变时。
- 的 selected 状态改变时。
受限组件
对于设置了value值(或value值为null)的组件,称作受限组件。
受限组件如 , , 和 ,它们渲染出来的 HTML 元素始终保持 value 属性的值,用户在渲染出来的元素里输入任何值都不起作用,如果想响应更新用户输入的值,就得使用 onChange 事件。
render: function() {
return <input type="text" value="Hello!" />;
}
这段代码将渲染为一个值总是为“Hello!”的输入框。任何用户输入都不会对该渲染后的元素其作用,因为React已将其值声明为“Hello!”。如果你想响应用户输入来更新该组件的值,你可以使用onChange事件:
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
27-React Lists and Keys的更多相关文章
- Lists and keys
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...
- React中的Keys
前言 当你在React当中渲染列表项的时候,React会尝试存储对应每个单独项的相关信息,如果你的组件包含state状态数据,那么这些状态数据必须被排序. 当你想要更新这些列表项的时候,React必须 ...
- React文档翻译 (快速入门)
翻译自react的大部分文档,方便自己查阅. 目录 生命周期 实例化 存在期 销毁期 state Do Not Modify State Directly State Updates May Be A ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- 重谈react优势——react技术栈回顾
react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- react常见面试题
当你调用 setState 的时候,发生了什么事? 当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态.这将启动一个称为和解(reconc ...
- React躬行记(3)——组件
组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...
随机推荐
- MySQL的几个概念:主键,外键,索引,唯一索引
概念: 主键(primary key) 能够唯一标识表中某一行的属性或属性组.一个表只能有一个主键,但可以有多个候选索引.主键常常与外键构成参照完整性约束,防止出现数据不一致.主键可以保证记录的唯一和 ...
- SpringMVC操作指南-整合Spring、SpringMVC、Hibernate、JUnit、Log4j、C3P0
- 《机电传动控制》PLC仿真
1.红绿灯 经仿真,可以完成所设定的要求.对比普通的红绿灯,知识加了X25和X20的控制,来控制夜间模式 . 2.传送带 经仿真,可以完成所设定的要求. 总结:这两个仿真都是亲自完成,感觉难度有些大. ...
- Python —条件语句
条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...
- 导入csv文件到mysql
原文 给自己做备份的,高手们请忽略. 数据太大,用数据库客户端软件直接导入非常卡,还是直接执行SQL吧. 1.指定文件路径. 2.字段之间以逗号分隔,数据行之间以\r\n分隔(我这里文件是以\n分隔的 ...
- (转)SVN服务器搭建和使用(一)
Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...
- appframework3.0(JQmobi)入门教程
2015-03-31 22:02 2011人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. appframework3.0好像是3月24日发布的,今天31号,发现和 ...
- java线程(2016-4-7)
Thread.yield()的调用是对线程调度器(Java线程机制的一部分,可以将CPU从一个线程转移到另一个线程)的一种建议,它在声明:"我已经执行完生命周期中最重要的部分了,此刻正是切换 ...
- Javascript中event.srcElement和event.target的区别
event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...
- linux Centos下搭建gitolite服务器
1.安装git sudo yum install git -y 2.添加git管理账号 sudo adduser git 3.将gitolite克隆到本地,并安装 sudo mkdir /var/gi ...