列表渲染
页面处理的数据较为复杂一些,一般格式为数组和数组对象
一、数组
// rcc 类组件快捷代码提示
import React, { Component } from "react";
export default class App extends Component {
// 使用state存储还是普通类属性存储?
// state修改后DOM刷新
// 普通属性 存储 不修改
skills = ["uni-app", "react", "reactNative", "angular", "ionic"];
// 把数组元素显示在单独的按钮上
// 分析:
// 1、数组元素需要一个一个遍历出来,外层包裹一个button标签
// 2、把拼接好的标签元素,添加一个数组中,在页面上渲染这个数组
showBtn() {
// 1.声明一个空数组
let arr = [];
// 2.遍历源数据 拼接标签 并添加到新数组
// item代表数组元素值 index代表数组的下标
this.skills.forEach((item, index) => {
// key 标签唯一值 渲染过程中 判断节点的更新
let tmp = (
<button style={
{ marginLeft: "10px" }} key={index}>
{item}
</button>
);
arr.push(tmp);
});
// 3.返回拼接好的数组
return arr;
}
// 练习:将sk