function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
} const numbers = [, , , , ];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
//key值最好选用id,没有稳定的id的时候选择index
const todoItems = todos.map((todo) =>
<li key={todo.id/index}>
{todo.text}
</li>
);
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
} const posts = [
{id: , title: 'Hello World', content: 'Welcome to learning React!'},
{id: , title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);

react 中文文档案例五 (循环列表)的更多相关文章

  1. react 中文文档案例三 (开关按钮)

    开关按钮制作   import React from 'react'; import ReactDOM from 'react-dom'; class Toggle extends React.Com ...

  2. react 中文文档案例七 (温度计)

    const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function toCelsius(fahrenheit) { ) * / ; } fun ...

  3. react 中文文档案例六 (表单)

    class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoin ...

  4. react 中文文档案例四 (登陆登出按钮)

    import React from 'react'; import ReactDOM from 'react-dom'; class LoginControl extends React.Compon ...

  5. react 中文文档案例二 (头像时间)

    import React from 'react'; import ReactDOM from 'react-dom'; function formatDate(date) { return date ...

  6. react 中文文档案例一 (倒计时)

    1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...

  7. phpspreadsheet 中文文档(五)节约内存+PHPExcel迁移

    2019年10月11日14:03:31 节省内存 PhpSpreadsheet在工作表中平均每个单元格使用约1k,因此大型工作簿可以迅速用尽可用内存.单元缓存提供了一种机制,使PhpSpreadshe ...

  8. ASP.NET Core 中文文档 第五章 测试(5.2)集成测试

    原文: Integration Testing 作者: Steve Smith 翻译: 王健 校对: 孟帅洋(书缘) 集成测试确保应用程序的组件组装在一起时正常工作. ASP.NET Core支持使用 ...

  9. talib 中文文档(五):文档导航

    Documentation 安装和问题 快速使用 高级应用 方法分类 Overlap Studies 重叠的研究 Momentum Indicators 动量指标 Volume Indicators ...

随机推荐

  1. spring特点与好处

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...

  2. 问题:PLS-00204: 函数或伪列 'EXISTS' 只能在 SQL 语句中使用;结果:PL/SQL中不能用exists函数?

    怎么写了一个语句带出这样的结果. 语句: if exists (select * from sysdatabases where name='omni') then 结果: ERROR 位于第 4 行 ...

  3. leetcode429

    这道题目是属于树的层次遍历,使用两层的队列非空判断. class Solution { public: vector<vector<int>> levelOrder(Node* ...

  4. request 10.0 模块安装

     https://pypi.python.org/packages/49/6f/183063f01aae1e025cf0130772b55848750a2f3a89bfa11b385b35d7329d ...

  5. 使用HttpClient进行Post通信

    ---------------siwuxie095                         首先到 Apache官网 下载相关的库文件     Apache官网:http://www.apac ...

  6. php学习笔记-include

    这个和C语言中的include是同样的用法,如果一个php文件中有一句include a.php,那么执行的时候就会把a.php的内容插入到这个php文件中. 举个例子,我现在有一个名为hellowo ...

  7. Luogu 2831 [NOIP2016] 愤怒的小鸟

    第一眼看成爆搜的状压dp,膜Chester大神犇. 考虑到三个不在同一直线上的点可以确定一条抛物线,而固定点$(0, 0)$和不在同一直线上这两个条件是题目中给定的,所以我们只要枚举两个点然后暴力算抛 ...

  8. Java并发之FutureTask

    FutureTask实现了Runnable和Future接口,是一个可取消的异步任务.利用开始和取消计算的方法.查询计算是否完成的方法和获取计算结果的方法,此类提供了对 Future 的基本实现.仅在 ...

  9. 24.Windows任意文件读取漏洞

    漏洞概述: 近日,国外安全研究员SandboxEscaper又一次在推特上公布了新的Windows 0 day漏洞细节及PoC.这是2018年8月开始该研究员公布的第三个windows 0 day漏洞 ...

  10. Linux中的sed解析

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...