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. ABP缓存

    简介 缓存是做什么的? 简单的可以认为是一个键值对的数据存于内存中,高速读取.作用为了减少和数据库的交互 Abp中缓存的使用 public class InvoiceAppService : Appl ...

  2. WEB-INF与Webroot

    WEB-INF:放在WEB-INF下的资源是浏览器访问不到的,但后台程序能跳转到的,但重定向不行

  3. CentOS7:ifconfig command not found解决和netstat -an

    没有 ifconfig 和netstat -an 的话安装 net-tools package yum install net-tools

  4. cocos2dx中坐标系

    CCNode类的setPosition,getPosition函数如果是一个Node的Child则获取的坐标就是该Node的本地坐标 另一个关键问题就是在cocos2d-x里就是各种对象的大小问题.因 ...

  5. Opencv中Rect_类

    Rect_类有些意思,成员变量x.y.width.height,分别为左上角点的坐标和矩形的宽和高.常用的成员函数有Size()返回值为一个Size,area()返回矩形的面积,contains(Po ...

  6. ROS Learning-029 (提高篇-007 A Mobile Base-05) 控制移动平台 --- (Python编程)控制虚拟机器人的移动(精确的制定目标位置)

    ROS 提高篇 之 A Mobile Base-05 - 控制移动平台 - (Python编程)控制虚拟机器人的移动(精确的制定目标位置) 使用 odometry 消息类型 重写 out_and_ba ...

  7. Luogu 3979 遥远的国度

    树剖已经是人尽皆知的sb题了吗…… 很早以前就想填掉这坑了…… 考虑到树链唯一,进行操作并不会对换根产生影响,那么我们的换根操作只要记下root在哪里就好了 询问的时候分类讨论: 1:root ==  ...

  8. WordCount程序及测试

    Github地址:https://github.com/CG0317/WordCount PSP表: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划  30 ...

  9. 《the art of software testing》 (1-2)章

    软件测试的心理学,重点是要认清: 测试时为发现错误而执行程序的过程 成功的测试:如果在测试某段程序时发现了错误,而且这些错误是可以修复的,就将这次合理设计并得到有效执行的测试称作是"成功的& ...

  10. 《Maven实战》笔记-3-Maven仓库

    一.Maven仓库的分类 1.本地仓库 一般来说,在Maven项目目录下,没有诸如lib/这样用来存放依赖文件的目录. 要自定义本地仓库目录地址时,可以编辑文件~/.m2/setting.xml,设置 ...