[新增]一个简单的列表组件,父组件向组件的参数传递
This commit is contained in:
BIN
src/.List.js.swp
Normal file
BIN
src/.List.js.swp
Normal file
Binary file not shown.
10
src/App.js
10
src/App.js
@@ -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
32
src/List.js
Normal 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
|
||||
Reference in New Issue
Block a user