javascript - 定义变量并从箭头函数返回组件

我想在.map()迭代中定义一个变量，以及返回一个组件。

但是在地图中包含此变量不起作用（给我错误）。这完全有可能吗，如果可以，我该怎么做？

以下是我要执行的操作的简化示例：

render() {
  return(
    <div>
      {array.map( (element, index) => (
        let disturbingVariable = 100 + index
        <MyComponent disturbingVariable={disturbingVariable} />
      ))}
    </div>
  )
}

最佳答案

当箭头函数具有多个语句时，您将无法再使用隐式返回语法。

添加大括号和return语句：

array.map((element, index) => {
  let disturbingVariable = 100 + index
  return <MyComponent disturbingVariable={disturbingVariable} />
})

或者，放弃变量声明并就地执行加法，并保持隐式返回：

array.map((element, index) =>
  <MyComponent disturbingVariable={100 + index} />)