我的组件中的这个 prop 语法是什么？ [复制]答案

【问题标题】：What is this prop syntax in my component? [duplicate]我的组件中的这个 prop 语法是什么？ [复制]
【发布时间】：2017-11-04 12:05:18
【问题描述】：

我有以下代码：

const cEditor = (onUpdate, props) => (<SelectEditor onUpdate=(onUpdate) {...props} />);

{...props} 在做什么？似乎它正在将道具传递给组件。这个语法是什么意思？

【问题讨论】：

标签： reactjs ecmascript-6 react-jsx

【解决方案1】：

这是使用spread syntax 将道具“传播”到组件。每the React documentation:

传播属性

如果你已经有props 作为一个对象，并且你想在JSX 中传递它，你可以使用... 作为一个“传播”操作符来传递整个props 对象。这两个组件是等价的：
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}
当您构建通用容器时，扩展属性会很有用。但是，它们也可以通过轻松将许多不相关的道具传递给不关心它们的组件来使您的代码变得混乱。我们建议您谨慎使用此语法。

因此，如果您有一个以 props 为键、props 值为值的对象，您可以使用传播语法将它们传播到组件。这两个组件是相同的：

const props = {
    a: 5,
    b: "string"
}
<Example {...props} />

等同于：

<Example a={5} b={"string"} />

在您的情况下，函数cEditor 中的props 是一个对象，它将所有道具和道具值分别作为键和值。然后，将那些 props 和 prop 值传递给 <SelectEditor>，除了 onUpdate，它是单独传递的（但如果 props 具有 onUpdate 键和值，则会被覆盖）。

【讨论】：