你如何在实例方法中访问 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

实际上声明有问题，您应该使用以下代码：

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

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

访问

通过使用冒号声明 class 的 statics 变量，您只需得到 undefined.

提示：不要使用 static keyword. it defines a static variable for the class that is not accessible inside the class. in ReactJS the static keyword often use for declaring prop types 的 class 道具成员。

更新

为了证明这段代码的正确性：请参阅IDE和浏览器

如果出错，请出示你的代码，也许你在不相关的地方调用了它。

Answer 2

让我们使用：

static DEFAULT_COUNTRY = 484

使用 static 您可以将 property/method 分配给 class 函数本身，而不是其原型。 FormContainer.DEFAULT_COUNTRY 中 this 的值是 class 构造函数 FormContainer 本身。

您可以在 class 中以 this.constructor.DEFAULT_COUNTRY 访问它。而作为 FormContainer.DEFAULT_COUNTRY 在 class 之内和之外。所以，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不是关键字，只是class字段的名称。希望对您有所帮助。

Answer 3

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

所有静态属性的对象

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

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

中的静态块

使用 ES6 classes（您正在使用的）静态属性声明如下

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

的 class 属性

Java脚本本身没有静态块，但您可以从外部从静态上下文修改class，例如

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

  render () {}
}

MyComponent.HELLO = 'world'

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

How do you access React statics within instance methods?

static

constants

instance-methods

reactjs

更新