import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { titleInfo: '列表和Key简单示例', titleOne: 'React.js开发示例', contentOne: 'React.js组件的应用开发', titleTwo: 'React.js安装方法', contentTwo: '可以使用npm安装',}const numbers = [1, 2, 3];function NumberList(pros) { const numbers = pros.numbers; const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>); return ( <ul>{listItems}</ul> );}function ListItem(props) { // 不需要指定Key的示例 return <li>{props.value}</li>;}function NumberListTwo(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // key应该在数组的上下文中被指定的示例 <ListItem key={number.toString()} value={number}/> ); return ( <ul>{listItems}</ul> );}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: 1, title: infoMap.titleOne, content: infoMap.contentOne}, {id: 2, title: infoMap.titleTwo, content: infoMap.contentTwo},];const ListAndKeyExample = () => { return ( <span> <h3>{infoMap.titleInfo}</h3> <NumberList numbers={numbers} /> <hr/> <NumberListTwo numbers={numbers} /> <hr/> <Blog posts={posts} /> </span> );}export default ListAndKeyExample;

运行效果：