欢迎大家来到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;
欢迎大家来到IT世界,在知识的湖畔探索吧!
运行效果:
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/56488.html