我的组件中的这个道具语法是什么？[副本]

Question

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

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

Answer 1

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

如果您已经有props作为对象，并且您希望在JSX中传递它，那么您可以使用...作为“spread”运算符来传递整个props对象。这两个组成部分是等价的：

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

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

在构建泛型容器时，扩展属性可能很有用。但是，它们也可以通过使大量不相关的道具很容易地传递给不关心它们的组件来使您的代码变得凌乱。我们建议您谨慎使用此语法。

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

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

与：

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

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