学习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.

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