在做网站时,大部分时候我们都需要在网址上做列表,比如说姓名列表等。那么在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
结果如下:
额外提一下:
- A “key” is a special string attribute you need to include when creating lists of elements
- Keys give the elements a stable identity
- Keys help React identify which items have changed, are added, or are removed.
- Help in efficient update of the user interface.
如果大家觉得写的不错的话,就用点赞来代替五星好评吧!