React（4）语法学习{列表渲染：数组、数组对象、map语法遍历数组、map语法遍历数组对象}

列表渲染

页面处理的数据较为复杂一些，一般格式为数组和数组对象

一、数组

// 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;
  }
  // 练习:将skills数组内容显示到列表标签中
  // 分析：最外层是ul 每一个元素标签为li标签
  showList() {
    let arr = [];
    this.skills.forEach((item, index) => {
      arr.push(<li key={index}>{item}</li>);
    });
    return arr;
  }
  render() {
    return (
      <div>
        {/* 默认数组元素会挨个渲染到页面上  */}
        {this.skills}
        {/* 调用button数组 */}
        {/* 事件触发的方法不加() */}
        {/* 普通方法调用 需要加() */}
        <br />
        {this.showBtn()}
        {/* 调用显示列表 */}
        <ul>{this.showList()}</ul>
      </div>
    );
  }
}

二、数组对象

import React, { Component } from "react";

export default class App extends Component {
  banners = [
    {
      title: "联想笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner1.png",
    },
    {
      title: "戴尔笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner2.png",
    },
    {
      title: "皮面笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner3.png",
    },
    {
      title: "网格笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner4.png",
    },
  ];
  showBanners() {
    let arr = [];
    this.banners.forEach((item, index) => {
      let tmp = (
        <div key={index}>
          <img src={item.url} width="200" />
          <div>{item.title}</div>
        </div>
      );
      arr.push(tmp);
    });
    return arr;
  }
  render() {
    return (
      <div>
        {/* 调用显示图片和标题 */}
        {this.showBanners()}
      </div>
    );
  }
}

三、map语法遍历数组

// rcc 类组件快捷代码提示
import React, { Component } from "react";

export default class App extends Component {
  skills = ["uni-app", "react", "reactNative", "angular", "ionic"];
  // 版本4 定义方法时,也用箭头函数  精简返回值
  showBtn = () =>this.skills.map((item, index) => (
      <button style={{ marginLeft: "10px" }} key={index}>
        {item}
      </button>
  ));
  // 版本3 map里的方法使用的箭头函数 箭头函数 精简返回值
  // return语法精简  前:()=>{return xxxx}  精简后:()=>xxxx
  showBtn3() {
    return this.skills.map((item, index) => (
      <button style={{ marginLeft: "10px" }} key={index}>
        {item}
      </button>
    ));
  }
  // 版本2 省略变量
  showBtn2() {
    return this.skills.map((item, index) => {
      return (
        <button style={{ marginLeft: "10px" }} key={index}>
          {item}
        </button>
      );
    });
  }
  // 版本1 map写法 节省了空数组和手动push操作
  showBtn1() {
    let arr = this.skills.map((item, index) => {
      return (
        <button style={{ marginLeft: "10px" }} key={index}>
          {item}
        </button>
      );
    });
    return arr;
  }
  render() {
    return <div>{this.showBtn()}</div>;
  }
}

四、map语法遍历数组对象

import React, { Component } from "react";

export default class App extends Component {
  banners = [
    {
      title: "联想笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner1.png",
    },
    {
      title: "戴尔笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner2.png",
    },
    {
      title: "皮面笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner3.png",
    },
    {
      title: "网格笔记本",
      url: "http://www.codeboy.com:9999/img/index/banner4.png",
    },
  ];
  // 通过foreach实现
  showBanners1() {
    let arr = [];
    this.banners.forEach((item, index) => {
      let tmp = (
        <div key={index}>
          <img src={item.url} width="200" />
          <div>{item.title}</div>
        </div>
      );
      arr.push(tmp);
    });
    return arr;
  }
  // 通过map实现
  // 注意点
  // 1.外层方法使用箭头函数定义 map里的回调方法也使用箭头函数定义
  // 2.箭头函数 如果没有return关键字语法 就不写{} 箭头函数里面返回值就是一行 用()
  showBanners = () =>
    this.banners.map((item, index) => (
      <div key={index}>
        <img src={item.url} width={200} />
        <div>{item.title}</div>
      </div>
    ));
  render() {
    return (
      <div>
        {/* 调用显示图片和标题 */}
        {this.showBanners()}
      </div>
    );
  }
}