Question

我有儿童菜单：

    export default class TopMenuPage extends Component {

        constructor(props) {
            console.log(props)
            super(props)
            this.state = {
                activeItem: 'overview',
            }
            console.log(this.props)
        }



        render = () => {
            return (
                <div>
                    TEST
                </div >
            )
        }

}

我将此菜单包含在父母中，如下所示：

        render = () => {
            return (
                <div>
                    <TopMenuPage />
                </div >
            )
        }

当调用子组件TopMenuPage的构造函数时，props为空。为什么呢？

输出是： {} {}

我不明白为什么。我需要从道具中读取网址。

感谢您的帮助。

Answer 1

当您在父母组件中调用TopMenuPage时，您没有将任何道具传递给TopMenuPage组件，以便您这样做。你可以像下面这样做。

render() {
  return (
    <div>
     <TopMenuPage name="Menu" isShowing={true} foo="bar" />
    </div >
  );
}

这样，当您使用TopMenuPage在console.log(this.props)构造函数中进行记录时，您会在console

中看到以下结果

{ 
   name: 'Menu,
   isShowing: true,
   foo: 'bar'
}

为什么在子组件中反应道具是空的？

1 个答案: