四时宝库

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;