React 基础 - 08 （列表渲染：forEach、map）

数据格式一般为：数组 或者为 数组对象

forEach方法遍历：

        1、声明一个空数组

        2、遍历skills数组，处理操作，把元素插入到button标签中（数组对象，就item.xxx）

        3、返回构建的新的button标签数组

export default class App extends Component {
  skills = ["uniapp", "react", "reactNative", "angular", "ionic"];

  showBtn() {
    let arr = [];
    this.skills.forEach((item, index) => {
      let tmp = (
        <button key={index} style={{ marginRight: 10 }}>
          {item}
        </button>
      );
      arr.push(tmp);
    });
    return arr;
  }

  render() {
    return (
      <div>
        {this.skills}
        {this.showBtn()}
      </div>
    );
  }
}

map方法渲染：

export default class App extends Component {
  skills = ["uniapp", "react", "reactNative", "angular", "ionic"];

  showBtn() {
    return this.skills.map((item, index) => (
      <button key={index}>{item}</button>
    ));
  }

  //最精简的写法，省略箭头函数的return和{}
  showBtn = () => this.skills.map((item, index) => (<button key={index}>{item}</button>);

  render() {
    return (
      <div>
        {this.skills}
        {this.showBtn()}
      </div>
    );
  }
}