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

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

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

Why is react props empty in child component?

reactjs

react-props