[新增]一个简单的列表组件,父组件向组件的参数传递

This commit is contained in:
唐明明
2021-02-15 14:52:46 +08:00
parent 45feb1c349
commit 86a21a6c83
3 changed files with 42 additions and 0 deletions

BIN
src/.List.js.swp Normal file

Binary file not shown.

View File

@@ -1,9 +1,19 @@
import logo from './logo.svg';
import List from "./List"
import './App.css';
function App() {
return (
<div className="App">
<List title='这是一个列表组件' listArr={
[
{id: '1', title: '掉队风险VS炸裂财富未来10年你必须跟上哪些赚钱新规则'},
{id: '2', title: '全国省级经营性国有资产集中统一监管比例已超九成'},
{id: '3', title: '茅台还能走多远?'},
{id: '4', title: '日本2020年GDP萎缩4.8% 11年来首次呈现负增长'},
{id: '5', title: '韩国三星重工再获5艘LNG船大单'}
]
}/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>

32
src/List.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* Web唐明明
* 匆匆数载恍如梦,岁月迢迢华发增。
* 碌碌无为枉半生,一朝惊醒万事空。
* ComponentName: '列表'
*/
import React from "react"
class List extends React.Component {
render() {
return (
<div>
<h3>{ this.props.title || '是一个列表内容' }</h3>
<ul>
{
this.props.listArr.map((item, key) => {
return (
<li key={key}>
{item.title}
</li>
)
})
}
</ul>
</div>
)
}
}
export default List