美文网首页
2-5 列表渲染

2-5 列表渲染

作者: bestCindy | 来源:发表于2020-07-22 00:16 被阅读0次

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

相关文章

  • 2-5 列表渲染

    列表渲染将列表的内容拼装成数组,放置到模板当中将数据拼装成数组 JSX 对象 使用 数组的 map 方法,对每一项...

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • art-template

    列表渲染 条件渲染

  • 列表渲染

    在小程序的不同生命周期和不同的用户操作情况下,可能需要为用户展示和相应不同的内容,在这个时候,我们可以借助条件渲染...

  • 列表渲染

    1. vm.items[indexOfItem] = newValue 2. vm.items.length =...

  • 列表渲染

    用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令...

  • 列表渲染

    1.v-for遍历数组 2.v-for遍历对象 v-for默认使用“就地复用”策略更新已渲染过的元素列表,为了跟踪...

  • 列表渲染

    基本用法 我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items形式的...

  • 列表渲染

    列表渲染适合于一些复用性比较高的元素关键词:v-for指令 有序列表ol和无序列表ul是天然可以适用这种情况的元素...

网友评论

      本文标题:2-5 列表渲染

      本文链接:https://www.haomeiwen.com/subject/kjzwkktx.html