Почему реквизит не отображается, когда я пытаюсь печатать в React
Я пытаюсь передать простой класс на печать, но он не работает.
Когда я проверяю console.info, получаю что-то вроде:
Object { "$$typeof": Symbol(react.element), type: Category(), key: null, ref: null, props: {…}, _owner: {…}, _store: {…}, … }
Это моя текущая отдача от класса App в качестве теста:
return (
<div>
<Category category = {<Category categoryId = {123} categoryName = "Hohnny" />} />
</div>
);
А это класс моей категории:
import React from "react";
class Category extends React.Component {
render() {
console.info(this.props.category);
return (
<div>
{this.props.categoryId}
</div>
); // end return
}
}
export default Category;
Что я делаю неправильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот что напечатано в console.info:
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>
)
Вы отправляете опору неверным способом. Отправка props в react похожа на вызов компонента и передачу ему свойств, но не на передачу компонента компоненту и ожидание доступности свойств.
Вот как вы должны вызвать компонент и передать ему свойства
return (
<div>
<Category categoryId = {123} categoryName = "Hohnny" />
</div>
)
Редактировать:
Если вы хотите передать компонент как опору, это можно передать как
<Category categoryId = {123} categoryName = "Hohnny" category = {<SomeOtherComponent />}/>
Да, это действительно так.
Итак, чтобы расширить вопрос, есть ли у меня массив, и я нажимаю на массив, правильный ли этот формат?
categories.push(<Category categoryId = {data.categories[index].id} categoryName = {data.categories[index].name} />)