React-列表应用开发

大家好，欢迎来到IT知识分享网。

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;

运行效果：