React类组件constructor定义的变量在render方法为undefined如何解决

问题原因 #

你在constructor中使用var声明的domainUrl是构造函数的局部变量，作用域仅局限在constructor函数内部，render方法属于类的另一个成员方法，自然无法访问到另一个函数的局部变量。同时你代码里给init对象属性赋值的语法也有误，对象键值对需要用冒号而非等号。

解决方法 #

方案1：绑定到类实例对象（最常用，适合不需要触发重渲染的静态变量） #

直接把变量挂载到类的this实例上，整个类内部的所有方法都可以通过this访问到：

export default class GameConsole extends React.PureComponent {
  constructor(props) {
    super(props);
    // 挂载到this实例
    this.domainUrl = window.location.origin;
  }

  render() {
    return (
      <div>
        <GameControl
          init={{
            masterUrl: this.domainUrl
          }}
        />
      </div>
    )
  }
}

方案2：声明为类实例属性（语法更简洁） #

如果你的项目支持类属性语法（React官方脚手架默认已支持），可以直接在constructor外声明，不需要写在构造函数里：

export default class GameConsole extends React.PureComponent {
  // 直接声明实例属性
  domainUrl = window.location.origin;

  render() {
    return (
      <div>
        <GameControl
          init={{
            masterUrl: this.domainUrl
          }}
        />
      </div>
    )
  }
}

方案3：放到state中（适合后续需要修改、且修改后要触发页面重新渲染的场景） #

如果这个变量后续会发生变化，并且变化后需要更新页面，就把它存在组件state里：

export default class GameConsole extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      domainUrl: window.location.origin
    };
  }

  // 后续要修改的时候调用setState
  updateUrl = (newUrl) => {
    this.setState({ domainUrl: newUrl })
  }

  render() {
    return (
      <div>
        <GameControl
          init={{
            masterUrl: this.state.domainUrl
          }}
        />
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者SkyeBoniwell