import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { bookName: '书名:《', bookNameEnd: '》', author: '作者:', publisher:'出版社:', keyWords:'关键词:', titleInfo: 'key简单实例',}const alpha = ['a', 'b'];var i = 0;const alphaList = alpha.map((alpha)=> <li key={i++}>{alpha}</li>);const id = new Array(3);for (let i = 0; i < id.length; i++){ id[i] = Math.round((Math.random() * Math.pow(10, 10)));}const alphaList2 = alpha.map((alpha, index)=> <li key={id[index].toString()}>{index}-----{alpha}</li>);i = 0;function MapList(props){ const alpha = props.alpha; const list = alpha.map((alpha)=> <li key={i++}>{alpha.toUpperCase()} - {alpha}</li>); return ( <ul> {list} </ul> );}function BookList(props){ const books = props.books; const bookName = books.name; const author = books.author; const publisher = books.publisher; i = 0; const skills = books.skills; const bookSkills = skills.map((skill)=> <li key={i++}>{skill}</li>); let j = 0; return ( <ul> <li>{infoMap.bookName} {bookName} {infoMap.bookNameEnd}</li> <li>{infoMap.author} {author}</li> <li>{infoMap.publisher} {publisher}</li> <li key={j++}>{infoMap.keyWords} <ul> {bookSkills} </ul> </li> </ul> );}i = 0;function BookComp(props){ const bookList = props.bookList; const bookListMap = bookList.map((books)=> <BookList books={books} key={i++}></BookList>); return ( <ul> {bookListMap} </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 bookList = [book1, book2, book3];const numbers = [1, 2, 3];const listItems = numbers.map((number)=> <li key={number.toString()}>{number}</li>);const KeyExample = () => { return( <span> <h3>{infoMap.titleInfo}</h3> <ul> {alphaList} </ul> <hr/> <ul>{alphaList2}</ul> <hr/> <MapList alpha={alpha}/> <hr/> <ul> {listItems} </ul> <BookComp bookList={bookList}/> </span> )}export default KeyExample;