将函数传递给组件但收到未定义

Question

在我的应用中，我需要将一个函数传递给“菜单”组件，该组件将在主组件内容区域中呈现必要的内容。

这是我在主要组件中所做的：

new Menu({ props: {contentComponentMounter: this.mountContentComponent}})

在我的菜单组件中，我具有以下内容：

 constructor(props) {
        super(props);

        console.log(props, props.contentComponentMounter);    
    };

这是我得到的控制台输出：

如您所见，当我尝试记录道具时，我确切地看到了预期的内容，但是对于props.contentComponentMounter，它显示为未定义。为什么会这样？

Answer 1

您需要像props.props.contentComponentMounter那样称呼它。因为还要注意在此调用{ props: {contentComponentMounter: this.mountContentComponent}}中参数的样子，所以从您的console.log输出中可以看到相同的结果。

如果将参数作为Menu传递给new Menu({contentComponentMounter: this.mountContentComponent})构造函数，则不会变得不确定。

Answer 2

构造函数（道具）{         超级（道具）;

    console.log(props, props.props.contentComponentMounter);    
};