ES6箭头函数中参数列表周围的括号是什么意思？

Question

来自 文档：

这是一个简单的ES6箭头函数，但是我找不到将( onClick, completed, text )参数用括号包裹（也就是：({ onClick, completed, text })）的好处 - 没有记录 - 没有例子。

const Todo = ({ onClick, completed, text }) => ( <---- here
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo

我猜这看起来像我们执行导入时的样子：

import  { PropTypes, Component } from 'react'

干杯

- Marwen Trabelsi

---

这个 JavaScript 符号是什么意思？这个 JavaScript 符号是“？”和“：”组成的三元条件运算符，也称为“三目运算符”。它可以用作简单的 if/else 语句的快捷方式。如果条件为真，则返回第一个值；如果条件为假，则返回第二个值。例如：var result = (condition) ? 'value1' : 'value2';如果条件为 true，result 的值将为 'value1'，否则为 'value2'。 - Oriol

@Oriol：好链接，但是如果你实际上不知道“对象解构”是什么，那就很难找到了。 :-) - Marwen Trabelsi

Answer 1

这被称为对象解构。

您正在查看一个React代码，在其中props是一个对象：

const props = { onClick: function() {}, completed: false, text: 'some string' };

为了直接使用props对象属性，我们使用解构将它们分配给单独的变量：

const Todo = ({ onClick, completed, text }) => ( <---- here
  <li
    onClick={onClick} // <-- the onClick variable
    style={{
      textDecoration: completed ? 'line-through' : 'none'  // <-- the completed variable
    }}
  >
    {text}  // <-- the text variable
  </li>
)

如果我们不使用解构，我们将不得不使用点表示法从props对象中获取属性：

const Todo = (props) => ( <---- here
  <li
    onClick={props.onClick} // <-- the onClick property
    style={{
      textDecoration: props.completed ? 'line-through' : 'none'  // <-- the completed property
    }}
  >
    {props.text}  // <-- the text property
  </li>
)

析构和导入具有非常相似的语法，但它们并不完全相同-您可以在此答案中了解更多信息。

- Ori Drori