你如何在实例方法中访问 React 静态变量？

Question

我正在使用 React 16.13.0。我已经在我的组件中定义了这个静态块...

class FormContainer extends Component {
  statics: {
    DEFAULT_COUNTRY: 484;
  }

  constructor(props) {
    super(props);

    ...

  componentDidMount() {
    let initialCountries = [];
    let initialProvinces = [];
    // Get initial countries
    fetch('/countries/')
        .then(response => {
            return response.json();
        }).then(data => {
        initialCountries = data.map((country) => {
            return country
        });
        console.log("output ...");
        console.log(initialCountries);
        this.setState({
            countries: initialCountries,
        });
    });
    // Get initial provinces (states)
    console.log("val:" + this.DEFAULT_COUNTRY); 

我的问题是，如何引用该静态块？以上

console.log("val:" + this.DEFAULT_COUNTRY);

生产

undefined 

Answer 1

混淆来自旧的React.createClass 函数，如果您的运行时不支持类作为 Javascript 功能，您将使用该函数。您将在 React.createClass 中传递一个对象，React 将为该组件创建一个类。在那里，该对象上的statics 属性就像一个具有该伪类的所有静态属性的对象：

// old
const MyComponent = React.createClass({
  statics: {
    DEFAULT_COUNTRY: 484
  },
  render: function() {}
})

这里没有真正的类，它只是对象中的一个对象，确实很容易与例如混淆。 Java中的静态块

使用 ES6 类（您正在使用）静态属性是这样声明的

class MyComponent extends React.Component {
  static DEFAULT_COUNTRY = 484
  static ANOTHER_STATIC_PROPERTY = 23

  render () {}
}

并且可以在任何地方以MyComponent.DEFAULT_COUNTRY 的身份访问

您很可能使用 Babel，在这种情况下，应该启用 babel-plugin-proposal-class-properties，因为并非所有浏览器都支持此功能。没有 Babel 的节点从版本 12 开始支持类属性

Javascript 本身没有静态 blocks，但您可以从外部从静态上下文修改类，例如

class MyComponent extends React.Component {
  static DEFAULT_COUNTRY = 484
  static ANOTHER_STATIC_PROPERTY = 23

  render () {}
}

MyComponent.HELLO = 'world'

Answer 2

让我们使用：

static DEFAULT_COUNTRY = 484

使用static，您可以将属性/方法分配给类函数本身，而不是其原型。 FormContainer.DEFAULT_COUNTRY中this的值就是类构造函数FormContainer本身。

您可以在班级内以this.constructor.DEFAULT_COUNTRY 的身份访问它。在课堂内外作为FormContainer.DEFAULT_COUNTRY。 所以，console.log("val:" + this.constructor.DEFAULT_COUNTRY);

考虑以下作为存储 DEFAULT_COUNTRY` 的选项：

class FormContainer extends Component {
  constructor(props) {
    super(props);
    this.DEFAULT_COUNTRY = 484;
  }
  render(){
    console.log(this.DEFAULT_COUNTRY)
    ...
  }
};

或

class FormContainer extends Component {
   DEFAULT_COUNTRY = 484;
   render(){
     console.log(this.DEFAULT_COUNTRY)
     ...
   }
};

或者，这也是一种选择：

class FormContainer extends Component {
  statics = {
    DEFAULT_COUNTRY: 484,
  };
  render(){
    console.log(this.statics.DEFAULT_COUNTRY)
     ...
  }
};

但在最后一个例子中，statics 不是关键字，而只是类字段的名称。希望这会对你有所帮助。

Answer 3

其实声明有问题，你应该使用下面的代码：

class FormContainer extends Component {
  statics = { // use equal sign not colon sign
    DEFAULT_COUNTRY: 484, // use comma here not semicolon
  };

然后在FormContainer 类的任何地方，您都可以通过this.statics 访问，对于您的默认国家/地区，您可以通过this.statics.DEFAULT_COUNTRY 访问。

通过使用冒号声明类的statics 变量，您将得到undefined。

提示：不要使用static 关键字。它为在类内部不可访问的类定义了一个静态变量。在 ReactJS 中，static 关键字通常用于声明类道具成员的prop types。

---

更新

为了证明代码的正确性：查看 IDE 和浏览器

如果您遇到错误，请显示您的代码，也许您在不相关的地方调用它。