Question

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

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

以下是我正在尝试做的简化示例：

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

Answer 1

或者，你可以省略return和block braces，但是函数体应该是一个带隐式返回的衬里：

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

有关隐式回复的更多信息here

Answer 2

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

添加块括号和return语句：

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

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

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

Answer 3

通常我会使用箭头

这是一个单一的指令功能
当箭头是回调等时，我需要this仍然引用调用上下文...

然而，接受的答案表明

当箭头功能有多个语句时，你就不能再这样了使用隐式返回语法。

这是不正确的，因为我们有逗号（,）运算符，您仍然可以使用隐式返回。但是，如果您需要变量声明，则在使用逗号运算符时，不能使用var，let或const关键字。但是，您仍然可以将箭头函数范围内的变量声明为未使用的参数。让我们看看如何在不使用大括号和显式返回的情况下执行代码。

render() {
  return(
    <div>
      {array.map((e, i, _, disturbingVariable) => (
        disturbingVariable = 100 + i, // comma here
        <MyComponent disturbingVariable={disturbingVariable} />
      ))}
    </div>
  )
}

Answer 4

这里是一个使用 jsx 组件的例子

const App = () => {
     const firstName = "abey"
     const lastName = "bruck"

     return(
        <p>hello {`${firstName} ${lastName}`}</p> 
     )

}

Answer 5

这是因为您尝试使用return语句隐式返回函数中的值而不是显式返回值。如果要返回值以及执行其他操作，则必须执行以下操作： -

Notice（）转换为{}并使用return语句显式返回组件。

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

从箭头函数定义变量和返回组件

5 个答案: