Javascript 为什么道具没有'；当我尝试打印时，不显示

我试图将一个简单的类转换为print，但它不起作用

当我检查console.log时，得到如下结果：

Object{“$$typeof”：Symbol（react.element），type:Category（），key:null，ref:null，props:{…}，{…}，{u-owner:{…}，{…}，{u-store:{…}，}

这是我当前在App类中作为测试返回的结果：

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;

从“React”导入React；
类类别扩展了React.Component{
render（）{
console.log（this.props.category）；
返回(
{this.props.categoryId}
)；//结束返回
}
}
导出默认类别；

---

我做错了什么？

这是控制台中打印的内容。日志：

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

你想做什么：

您的代码应该如下所示：

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

返回(
)

您以错误的方式发送道具。在react中发送道具类似于调用组件并向其传递属性，而不是将组件传递给组件并期望属性可用

这就是调用组件并向其传递属性的方式

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

返回(
)

编辑：

如果您想将组件作为道具传递，那么可以像

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

因此，如果我有一个数组，并且我正在推送数组，那么要扩展这个问题，这种格式正确吗

categories.push（）

是的，这是有效的。

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

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