Почему реквизит не отображается, когда я пытаюсь напечатать в ответ

Question

Я пытаюсь передать простой класс для печати, но он не работает.

Когда я проверяю console.log, получаю что-то вроде: Object { "$$typeof": Symbol(react.element), type: Category(), key: null, ref: null, props: {…}, _owner: {…}, _store: {…}, … }

Это мой текущий возвратв классе приложения в качестве теста:

return (
  <div>
    <Category category = {<Category categoryId={123} categoryName="Hohnny" />} />
  </div>
);

И это мой класс категории:

import React from "react";

class Category extends React.Component {
  render() {
    console.log(this.props.category);
    return (
        <div>
            {this.props.categoryId}
        </div>
    ); // end return
  }
}

export default Category;

Что я делаю не так?

Answer 1

Вы отправляете реквизит неправильно.Отправка реквизита в реагирует аналогично вызову компонента и передаче ему свойств, но не похожа на передачу компонента компоненту и ожидание доступности свойств.

Это способ вызова компонента и передачи ему свойств.

return (
     <div>
      <Category categoryId={123} categoryName="Hohnny" />
  </div>
)

Редактировать:

Если вы хотите передать компонент в качестве реквизита, то он может быть передан как

<Category categoryId={123} categoryName="Hohnny" category={<SomeOtherComponent />}/>

Answer 2

Это то, что напечатано в console.log:

category = {<Category categoryId={123} categoryName="Hohnny" />}

Вы в основном пропускаете весь компонент как опору.Это не правильный способ сделать это.Простой пример:

<MyComponent />

Вы хотите передать реквизиты:

{
  someString: 'my string',
  someInt: 42,
  boolenTrue: true,
  booleanFalse: false,
}

Что вы хотите сделать:

<MyComponent someString="my string" someInt={42} boolenTrue booleanFalse={false} />

Ваш коддолжен выглядеть так:

return (
  <div>
    <Category categoryId={123} categoryName="Hohnny" />
  </div>
)