Javascript 通过ref访问自定义组件方法无法按预期工作

有人能解释一下为什么在

SomeClass

constructor

getLoggerClass

方法中返回未定义的，但在

onClick（）

方法中返回logger类

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.getLoggerClass=this.getLoggerClass.bind（this）
}
render（）{
返回(
{this.loggerClass=c}}/>
) 
}
getLoggerClass（）{
返回这个.loggerClass
}
}
类SomeClass扩展了React.Component{
建造师（道具）{
超级（道具）
this.loggerClass=this.props.app.getLoggerClass（）
console.log（this.loggerClass）
this.onClick=this.onClick.bind（this）
}
render（）{
返回单击
}
onClick（）{
console.log（this.props.app.getLoggerClass（）.console）
}
}
类LoggerClass扩展了React.Component{
render（）{
返回
}
控制台（五）{
控制台日志（v）
}
test（）{}
}
ReactDOM.render（，document.getElementById（'app'））

罪魁祸首如下：

constructor(props){
super(props)

this.loggerClass = this.props.app.getLoggerClass()
console.log(this.loggerClass)

this.onClick = this.onClick.bind(this)
}

要了解问题，您必须了解报价单mdn

基本上，这个构造函数方法是用来初始化的，所以在类生命周期中只调用一次。因此，当您的

SomeClass

首次呈现时，将调用

构造函数

方法，并在其中定义：this.loggerClass为this.props.app.getLoggerClass（）（注意，您在初始化时立即调用了该函数），因此发生的情况是：

• 调用第一个构造函数（）
• 在其中，您直接调用了getLoggerClass（）方法，该方法返回dom节点，但在初始化时它是

  未定义的

尽量不要直接调用getLoggerClass方法，而是稍后再调用它，不过您不需要绑定它，只需在SomeClass组件中声明一个只调用getLoggerClass方法的方法，如下所示：

callGetLoggerClassFromProps() {
  return this.props.app.getLoggerCLass()
} 

---

通过这种方式，您可以为要分配的ref指定时间。

这是因为

LoggerClass

节点上的

ref

函数在

SomeClass

的

构造函数运行时尚未执行。
构造函数
在创建虚拟DOM时执行，而
ref
在组件实际装载到真实DOM（）时执行。以下是我认为您正在寻找的内容，以及
SomeClass
的
componentDidMount
中的相关代码：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.getLoggerClass=this.getLoggerClass.bind（this）
}
render（）{
返回(
{this.loggerClass=c}}/>
) 
}
getLoggerClass（）{
返回这个.loggerClass
}
}
类SomeClass扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
componentDidMount（）{
this.loggerClass=this.props.app.getLoggerClass（）
console.log（'in mounted'，this.loggerClass.console）
}
render（）{
返回单击
}
onClick（）{
console.log（this.props.app.getLoggerClass（）.console）
}
}
类LoggerClass扩展了React.Component{
render（）{
返回
}
控制台（五）{
控制台日志（v）
}
test（）{}
}
ReactDOM.render（，document.getElementById（'app'））
感谢您的解释，@Zevgon使用
componentDidMount
解决此问题的方法是一种很好的方法。