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

Question

<分区>

Answer 1

这叫做 object destructuring .

你正在看一段 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>
)

解构和导入具有非常接近的语法，但它们做的事情并不完全相同 - 您可以在此 answer 中阅读更多相关信息.