javascript - 同时解构和传入完整对象

Question

我有一个简单的 React 组件:

const FullContainer = ({
  backgroundColor,
  children,
}) => (
  <Container
    backgroundColor={backgroundColor}
  >
    {children}
  </Container>
);

我目前正在破坏我希望我的组件使用的仅有的两个属性，但我也想传入 props 并将其传播:

const FullContainer = (props, {
  backgroundColor,
  children,
}) => (
  <Container
    backgroundColor={backgroundColor}
    {...props}
  >
    {children}
  </Container>
);

奇怪的是，这毫无错误地破坏了我的页面。我一定做错了什么。我的语法有误吗？

Answer 1

您可以使用 rest spread syntax提供剩余的属性，这些属性不会像

这样的数组被解构

const FullContainer = ({
  backgroundColor,
  children,
  ...props
}) => (
  <Container
    backgroundColor={backgroundColor}
    {...props}
  >
    {children}
  </Container>
);