Разрушение и передача в полном объеме объекта одновременно

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