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

从：

这是一个简单的ES6 arrow函数，但我找不到将（onClick，completed，text）参数用括号括起来的好处（aka:（{onClick，completed，text}）-没有文档提及-没有示例

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

export default Todo

干杯

这就是所谓的

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

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

要直接使用

道具

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

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>
)

---

Destructuring和Import的语法非常接近，但它们的作用并不完全相同——您可以在本文中了解更多相关内容。

@Oriol:链接不错，但很难找到您真正不知道的内容（“对象Destructuring”）。：-）

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>
)

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>
)