reactjs - 为什么子组件中的反应道具为空？

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 为空。为什么？

输出为：{} {}

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

感谢您的任何帮助。

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'
}