React引用ReferenceError

Question

我试图使用React提供的ref属性来引用DOM元素：

class A extends React.Component {
  popup;
  render() {
    return(
      <div>{this.renderTemplate()}</div>
    )
  } 
  renderTemplate = () => {
    if(someCondition) {
      return(
        <span ref={(pop) => {this.popup = pop}}></span>
      )
    }
  }
}

当应用运行时，

this.popup在上面的代码中未定义。在Chrome开发工具中进行调试时，我看到了

  

“ReferenceError： pop未在eval中定义（eval at render fileName.js：lineNo：columnNo）”。

为什么会这样？

Answer 1

您可能需要将popup绑定到组件中的this以及在returnTemplate

中添加return关键字

  renderTemplate = () => {
      if(someCondition) {
        return <span ref={(pop) => {this.popup = pop}}></span>
      }
    }

Answer 2

您是否尝试将renderTemplate编写为类的方法而不是分配给属性的函数？

  renderTemplate(){
    if(someCondition) {
      return(
        <span ref={(pop) => {this.popup = pop}}></span>
      )
    }
  }

您可以参考this。