列表渲染
将列表的内容拼装成数组,放置到模板当中
将数据拼装成数组 JSX 对象
import React from 'react';
import ReactDOM from 'react-dom';
let arr = ["小明", "小黑", "小白"];
let arrHtml = [<li>小明</li>, <li>小黑</li>, <li>小白</li>];
class Welcome extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div>
{/* <ul>
{ arr }
</ul> */}
<ul>
{ arrHtml }
</ul>
</div>
)
}
}
ReactDOM.render(<Welcome />, document.querySelector("#root"));
使用 数组的 map
方法,对每一项数据按照 JSX 的形式进行加工,最终得到 1 个每一项都是 JSX 对象的数组,再将数组渲染到模板中
key
值需要放置在每一项当中
例1:
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
return (
<li>
<h3>{ props.index }:{ props.data.title }</h3>
<p>{ props.data.content }</p>
</li>
)
}
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title: "第一节",
content: "数学"
},
{
title: "第二节",
content: "语文"
},
{
title: "第三节",
content: "英语"
}
]
}
}
render() {
let strArr = this.state.list.map((item, index) => {
return (
<ListItem key={ index } index={ index } data={ item }></ListItem>
)
});
return (
<div>
<h1>
课程表
</h1>
<ul>
{ strArr }
</ul>
</div>
)
}
}
ReactDOM.render(<Welcome />, document.querySelector("#root"));
例2:
import React from 'react';
import ReactDOM from 'react-dom';
// function ListItem(props) {
// return (
// <li>
// <h3>{ props.index }:{ props.data.title }</h3>
// <p>{ props.data.content }</p>
// </li>
// )
// }
class ListItem2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<li onClick={(event)=>this.clickEvent(
this.props.index,
this.props.data.title,
event
)}>
<h3>{ this.props.index }:{ this.props.data.title }</h3>
<p>{ this.props.data.content }</p>
</li>
)
}
clickEvent = (index, title, event) => {
alert(index + "-" + title)
}
}
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title: "第一节",
content: "数学"
},
{
title: "第二节",
content: "语文"
},
{
title: "第三节",
content: "英语"
}
]
}
}
render() {
let strArr = this.state.list.map((item, index) => {
return (
<ListItem2 key={ index } index={ index } data={ item }></ListItem2>
)
});
return (
<div>
<h1>
课程表
</h1>
<ul>
{ strArr }
</ul>
</div>
)
}
}
ReactDOM.render(<Welcome />, document.querySelector("#root"));
网友评论