Question

我有以下代码：

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

{...props}正在做什么？看起来它好像是传递道具到组件。这种语法是什么意思？

Answer 1

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

传播属性

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

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

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

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

与：

相同

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

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

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

1 个答案:

传播属性