Question

我有一个简单的React组件：

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

我目前正在破坏我希望组件使用的仅有的两个属性，但是我也想传递道具并将其传播：

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>
);

同时破坏和传递完整对象

1 个答案: