Как передать в качестве пропс другой компонент?

Question

[Марат Иванов]

Выходит ошибка

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.

const Header = props => (
    <div className="navHeader">
      {props.top}
    </div>
  );

  
export const Top = React.memo(props => (
  <div className="top">
    <div className="site-identifier">
      <Logo />
      <Link to="/">
        Привет
      </Link>
    </div>
    {props.children}
  </div>
));

вызывается в App

import Header, { Top } from "./views/header";
<Header top={Top}/>

Компонент Top надо передать пропсами.

Answer 1

[0xD34F]

const Header = ({ Top }) => (
  <div className="navHeader">
    <Top />
  </div>
);

...

<Header Top={Top} />

Comments

[Марат Иванов]

мне его надо в пропсах передать, а не компонентом

[0xD34F]

Чё? Вы что спросили, я на то и ответил.

Может, вы имели в виду

const Header = ({ top }) => (
  <div className="navHeader">
    {top}
  </div>
);

...

<Header top={<Top />} />

??

Тогда уж лучше

const Header = ({ children }) => (
  <div className="navHeader">
    {children}
  </div>
);

...

<Header>
  <Top />
</Header>

Думайте.

[Петр Мухуров]

Айрат Мухаметшин

import Header, { Top } from "./views/header";
<Header top={<Top />}/>

Answer 2

[Антон Спирин]

Рассмотрите вариант:

const Header = ({ children }) => (
    <div className="navHeader">
      {children}
    </div>
  );

<Header>
  <Top />
</ Header>

Можно еще решить как-то так:

const Header = ({ top }) => {
  const HeaderTop = top || Top;
  
  return (
    <div className="navHeader">
      <HeaderTop />
    </div>
  );
};

Тогда у вас будет компонент по-умолчанию, а свойство top можно будет использовать только там, где необходимо использовать другой компонент.

<Header /> // используем компонент по-умолчанию Top

<Header top={OtherTopCompnent} /> // используем другой компонент

Comments

[Марат Иванов]

Хороший вариант, спасибо!