学习React(15) - 列表渲染 (list rendering)

在做网站时,大部分时候我们都需要在网址上做列表,比如说姓名列表等。那么在React里,应该如何实现这个功能呢?那就请看这篇博客吧!

在src文件夹下面创建一个名为Namelist.js 文件,下面是代码:

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    return (
        <div>
            // 第一种写法
            <h2>
                {names[0]}
            </h2>
            <h2>
                {names[1]}
            </h2>
            <h2>
                {names[2]}
            </h2>
        </div>
    )
}

export default Namelist

在App.js 文件里:

// App.js 文件
import React from 'react';
import './App.css';
import Namelist from './Namelist'


function App() {
  return (
    <div className="App">
      <Namelist/>
    </div>
  );
}

export default App;

结果如下:
在这里插入图片描述


有人会问了,这是第一种写法,那么还有没有其他种写法呢?答案是有的,请看下面:
还是在 Namelist.js 文件里

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    return (
        <div>
            // 第二种写法
        	{
                names.map(
                    name => 
                        <h2>
                            {name}
                        </h2>
                )
            }
        </div>
    )
}

export default Namelist

在App.js文件里,还是跟上面的一样,结果还是一样的。


第三种写法:

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    const nameList = names.map(name => <h2>{name}</h2>)
    return (
        <div>
            // 第三种写法
        	{
                nameList
            }
        </div>
    )
}

export default Namelist

App.js 文件还是跟上面一样,结果同样。


现在,有可能会人要问了,如果一个数组里的每一个index内容不仅仅是名字而已,比如说年龄等。这应该如何来实现呢?这个别着急,下面的代码就会给出:

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const persons = [
        {
            id: 1,
            name: 'Bruce',
            age: 30,
            skill: 'React'
        },
        {
            id: 2,
            name: 'Clark',
            age: 20,
            skill: 'Angular'
        },
        {
            id: 3,
            name: 'Diana',
            age: 35,
            skill: 'Vue'
        }
    ]

    const personList = persons.map(person => (
        <h2>
            {person.name}, {person.age}. 
        </h2>
    ))
    
    return (
        <div>
            {
                personList
            }
        </div>
    )
}

export default Namelist

在App.js 文件里,还是跟上面一样,只是结果得改变了,下面是结果截图:
在这里插入图片描述


如果想用额外的文件来HTML里的内容呢,这改如何做呢?那么就得先在src文件夹下面创建一个名为Person.js 文件,内容如下:

// Person.js 文件
import React from 'react'

function Person({person, key}) {
    return (
        <div>
            <h2>
                {key} {person.name}, {person.age}. 
            </h2>
        </div>
    )
}

// 这个是未使用key 的,即使能有结果出来,但是这样会不好,得保证每个list里的内容保持独一无二
// 如果要用这个函数,就得使用Namelist.js 里的另外一个方法,博主已经将它注释了
// function Person({person}) {
//     return (
//         <div>
//             <h2>
//                 {person.name}, {person.age}. 
//             </h2>
//         </div>
//     )
// }

export default Person

那么在Namelist.js 问价里应该如何调用这个Person.js 文件呢:

// Namelist.js 文件
import React from 'react'
import Person from './Person.js'

function Namelist() {
    const persons = [
        {
            id: 1,
            name: 'Bruce',
            age: 30,
            skill: 'React'
        },
        {
            id: 2,
            name: 'Clark',
            age: 20,
            skill: 'Angular'
        },
        {
            id: 3,
            name: 'Diana',
            age: 35,
            skill: 'Vue'
        }
    ]

    // Key prop is a special attribute you need to include when creating lists of elements
    // Key 的值必须是独一无二的
    const personList = persons.map(person => <Person key={persons.id} person={person} />)

	// 没有key 的写法
	// const personList = persons.map(person => <Person person={person} />)
    return (
        <div>
            {
                personList
            }
        </div>
    )
}

export default Namelist

结果如下:
在这里插入图片描述


额外提一下:

  1. A “key” is a special string attribute you need to include when creating lists of elements
  2. Keys give the elements a stable identity
  3. Keys help React identify which items have changed, are added, or are removed.
  4. Help in efficient update of the user interface.

如果大家觉得写的不错的话,就用点赞来代替五星好评吧!

展开阅读全文
©️2020 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值