2-5 列表渲染

列表渲染
将列表的内容拼装成数组，放置到模板当中
将数据拼装成数组 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"));