我的组件中的这个 prop 语法是什么？

Question

我有以下代码：

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

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

Answer 1

那是使用传播语法将道具“传播”到组件。根据React 文档：

传播属性

如果你已经有props一个对象，并且你想在 JSX 中传递它，你可以使用...作为“传播”操作符来传递整个 props 对象。这两个组件是等效的：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

当您构建通用容器时，Spread 属性会很有用。然而，它们也可以让你的代码变得混乱，因为它可以很容易地将许多不相关的 props 传递给不关心它们的组件。我们建议您谨慎使用此语法。

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

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

是相同的：

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

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