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的更多相关文章

  1. Lists and keys

    function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...

  2. React中的Keys

    前言 当你在React当中渲染列表项的时候,React会尝试存储对应每个单独项的相关信息,如果你的组件包含state状态数据,那么这些状态数据必须被排序. 当你想要更新这些列表项的时候,React必须 ...

  3. React文档翻译 (快速入门)

    翻译自react的大部分文档,方便自己查阅. 目录 生命周期 实例化 存在期 销毁期 state Do Not Modify State Directly State Updates May Be A ...

  4. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  5. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  6. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  7. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

  8. react常见面试题

    当你调用 setState 的时候,发生了什么事? 当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态.这将启动一个称为和解(reconc ...

  9. React躬行记(3)——组件

    组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...

随机推荐

  1. java内存泄漏的定位与分析

    1.为什么会发生内存泄漏 java 如何检测内在泄漏呢?我们需要一些工具进行检测,并发现内存泄漏问题,不然很容易发生down机问题. 编写java程序最为方便的地方就是我们不需要管理内存的分配和释放, ...

  2. 初始Python

    一.Python简介 1.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新 ...

  3. LuaSrcDiet工具介绍(lua源码处理软件)

    Diet Food Diet (nutrition), the sum of the food consumed by an organism or group Dieting, the delibe ...

  4. RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

    在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...

  5. Webform Session Cookies状态保持

    Request对象的五个集合: ①.QueryString:用以获取客户端附在url地址后的查询字符串中的信息. 例如:stra=Request.QueryString ["strUserl ...

  6. C++之路进阶——HDU1880(魔咒词典)

    ---恢复内容开始--- New~ 欢迎参加2016多校联合训练的同学们~ 魔咒词典 Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 3 ...

  7. Media Queries使用方法

    1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...

  8. (一)NOR FALSH 讲解

    nor flash 起始地址: 1F FFFF  = 1 1111          1111 1111 1111 1111 = 2^20 *2 = 2^21=2M Nor Flash 采用了 A0- ...

  9. c#序列化json字符串及处理

    上面提到的第四篇文章最后有个解析数组的例子,出现了 .First.First.First.First.Children(); 我表示很晕,网上找的的例子大多数是关于JObject的,但是我很少看到JA ...

  10. PL/SQL Developer主数据库连接和窗口连接切换

    Oracle开发者估计对PL/SQL Developer都非常熟悉了,里面有些小的功能点大概还有些初学者没发现.PL/SQL Developer支持多连接多窗口,下面详细说说. 主连接的概念 打开PL ...