import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { bookName: '书名————《', bookNameEnd: '》', author: '作者————', publish: '出版社————', keyWords: '关键字————', price: '价格————', titleInfo: 'List简单示例',}const alpha = ['a', 'b'];const alphaList = alpha.map((alpha) => <li key={alpha}>{alpha}</li>);function MapList(props){ const alpha = props.alpha; const listAlpha = alpha.map((alpha) => <li key={alpha}>{alpha.toUpperCase()} - {alpha}</li>); return ( <ul> {listAlpha} </ul> );}const book1 = { name: 'Python编程从入门到实践', author: '埃里克·马瑟斯', publish: '人民邮电出版社', skills: ['Python'],}const book2 = { name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas', publish: '人民邮电出版社', skills: ['JavaScript', '脚本语言'],}const book3 = { name: 'Rust程序设计', author: '吉姆·布兰迪', publish: '人民邮电出版社', skills: ['Rust', '编程语言'],}const book4 = { name: '设计模式', author: '埃里克·伽马', publish: '机械工业出版社', skills: ['设计模式'],}const book5 = { name: '微信小程序开发入门到项目实践', author: '陈长生', publish: '清华大学出版社', skills: ['微信小程序'],}function BookList(props){ const books = props.books; const bookName = books.name; const author = books.author; const publish = books.publish; const skills = books.skills; const bookSkills = skills.map((skills) => { return <li key={skills}>{skills}</li> }); return ( <ul> <li>{infoMap.bookName} {bookName} {infoMap.bookNameEnd}</li> <li>{infoMap.author} {author}</li> <li>{infoMap.publish} {publish}</li> <li>{infoMap.keyWords} <ul>{bookSkills}</ul> </li> </ul> );}function BookComp(props){ const booklist = props.bookList; const booklistMap = booklist.map((bookList) => <BookList key={bookList.id} books={bookList}></BookList>); return ( <ul>{booklistMap}</ul> );}const bookList = [book1, book2, book3, book4, book5];const ListExample = () => { return( <span> <h3>{infoMap.titleInfo}</h3> <ul> {alphaList} </ul> <hr/> <MapList alpha={alpha}></MapList> <hr/> <BookComp bookList={bookList}></BookComp> </span> )}export default ListExample;

运行效果：