[新增]一个简单的列表组件,父组件向组件的参数传递
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 logo from './logo.svg';
|
||||||
|
import List from "./List"
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<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">
|
<header className="App-header">
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
<p>
|
<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