解构对象和箭头函数

Question

我正在参加在线课程来学习 React。一位学生发布了一个我认为非常优雅的问题的解决方案，我想更好地理解。该代码遍历项目数组以在 UI.

中创建一个列表

function ItemsMaker({items}) {

  return (

    <div className="itemblocks">

      {items.map(item => (

        <ExpenseItem

          title={item.title}

          amount={item.amount}

          date={item.date} />

      ))}

    </div>

  )

}

我认为将 props 对象解构为函数的参数的方式非常优雅。但我想更好地理解：

为什么 {items.map()} 需要在大括号内？这里应用的是什么原理？
为什么 .map 中的箭头函数看起来像 .map(item => (stuff)) vs .map(item => {stuffInsideBraces})

Answer 1

问题 1 的答案 - 在编写 JSX 时，如果你想访问在该函数中初始化的变量，你必须使用花括号语法来使用该变量并访问它的 properties/values。所以假设你有一个像下面这样的函数 -

showName = ({name}) => {
   let text = "MY NAME IS"
   return (<div>{text + name}</div>);
}

showName("BLABLA")

所以上面的函数应该 return 输出如下 -

MY NAME IS BLABLA

问题 2 的答案 -

基本上，当你有一个数据数组时，如上例所示，如果我们想访问该数据，我们将其写在花括号内，如果你想 return 每个数组对象的纯 jsx，我们可以通过 returning 我们想要 return.

的普通 jsx 来做到这一点

示例：

showName = ({listOfName}) => {
  let text = "MY NAME IS"
  return (
   {listOfName.map(name=> (<div> {text + name} </div>))}
  )
}
showName(["Xname", "Yname"])

所以在上面的例子中你会看到文本被打印了两次

MY NAME IS Xname
MY NAME IS Yname

解构对象和箭头函数

Destructured objects and arrow functions

jsx

reactjs

arrow-functions

object-destructuring