Question

我正在尝试转移一个简单的类进行打印，但是它不起作用。

当我检查console.log时，会得到以下信息： 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.log(this.props.category);
    return (
        <div>
            {this.props.categoryId}
        </div>
    ); // end return
  }
}

export default Category;

我在做什么错了？

Answer 1

您以错误的方式发送道具。在react中发送道具就像调用一个组件并将属性传递给它，而不是像将组件传递给组件并期望属性可用一样。

这是您必须调用组件并将属性传递给它的方式

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

当我尝试打印反应时，道具如何不显示

2 个答案: