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

Define variable and return component from an arrow function

本文关键字：函数 返回 组件 变量 定义      更新时间：2023-09-26

我想在.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} />)

或者，您可以省略return和块括号，但函数体应该是带有隐式返回的一行:

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

这里有更多关于隐式返回的信息

下面是一个使用JSX组件的示例

const App = () => {
     const firstName = "abey"
     const lastName = "bruck"
     return(
        <p>hello {`${firstName} ${lastName}`}</p> 
     )
}

通常当

  • 单指令函数
  • 我需要this仍然引用调用上下文时，箭头是一个回调等…

然而，被接受的答案表明

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

是不正确的，因为我们有逗号(,)操作符，您仍然可以使用隐式返回。但是，如果需要声明变量，则不能使用var、let或const关键字，同时使用逗号操作符。但是，您仍然可以在箭头函数的作用域中声明一个变量作为未使用的参数。让我们看看如何在不使用大括号和显式return的情况下编写代码。

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

这是因为您试图隐式地从函数返回值，而不是通过使用返回语句显式地返回值。如果您想要返回一个值并执行其他操作，则必须这样做:-

Notice()转换为{}，并使用return语句显式返回组件。

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