时间戳

首页 > 解决方案 > 使用 ES6 映射从反应道具构造数组

javascript - 使用 ES6 映射从反应道具构造数组

问题描述

我想以这种形式构造一个数组：

 droppableIds = {
    droppable1: 'list1',
    droppable2: 'list2',
    droppable3: 'list3'
  }

目前它是硬编码的，但我想抽象它来处理不同数量的列表。我已经做到了这一点，但我被正确的语法绊倒了：

  droppableIds = this.props.boxes.map(function(index) {
    const n = '' + index; //convert to string
    return droppable + n + ':' + 'list' + n
  });

props.boxes 看起来像这样

console.log('this.props.boxes: ', this.props.boxes, typeof this.props.boxes, Array.isArray(this.props.boxes));

返回：

this.props.boxes: Array(3) object true Array(3)

console.log(this.props.boxes)

0: {title: "Soft Targets", group: "1"} 
1: {title: "Hard Targets", group: "2"} 
2: {title: "Start ", group: "0"}

标签： javascriptarraysreactjs

解决方案

使用 ES6 完成的操作如下所示：

var boxes = [{
    title: "Soft Targets",
    group: 1
  },
  {
    title: "Hard Targets",
    group: 2
  },
  {
    title: "Start",
    group: 0
  }
]

var droppableIds = boxes.map((x, i) => ({ [`droppable${i+1}`]: x }))

console.log(droppableIds)

不确定它的确切目的。最初我以为你想列出实际的属性等。在任何一种情况下

boxes.map((x, i) => ({ [`droppable${i+1}`] : x }))

应该通过以下方式为您做什么：

  1. 使用带有箭头函数的 ES6 映射，函数.map((x, i) =>中x的下一项和i当前索引在哪里
  2. 使用模板文字，因为您想要的结果从 1 开始，所以droppable${i+1}我们使用 1i
  3. droppable${i+1}用 [] 表示法 [ ]组成最终的返回对象

推荐阅读