使用 ES6 反应静态类

Question

React 中的静态对象是否与 ES6 类一起工作？

class SomeComponent extends React.Component {

  render() {
    // ...
  }

}

React.statics = {
  someMethod: function() {
    //...
  }
};

当我做 SomeComponent.someMethod()

时，类似上面的东西给了我未定义的方法 someMethod

Answer 1

statics 仅适用于 React 组件，check docs.

Answer 2

statics 仅适用于 React.createClass。只需将方法声明为静态 class 方法：

class SomeComponent extends React.Component {

  static someMethod() {
    //...
  }

  render() {
    // ...
  }

}

关于

React.statics = { ... }

您实际上是在 React 对象上创建 statics 属性。属性不会神奇地 扩展您的组件。

Answer 3

虽然statics只适用于React.createClass，你仍然可以用ES6符号写静态方法。如果你用的是ES7，那你也可以写静态属性。

你可以这样在 ES6+ classes 中编写静态：

class Component extends React.Component {
    static propTypes = {
    ...
    }

    static someMethod(){
    }
}

或者像这样在 class 之外：

class Component extends React.Component {
   ....
}

Component.propTypes = {...}
Component.someMethod = function(){....}

如果你想像前者那样写，那么你必须在 Babel 上设置 stage: 0（因为它是实验性的）。

Answer 4

无需实例化组件即可访问静态。 通常它们没有那么有用，但有一些特殊情况。例如，当您通过执行 ACTION PERFORM 离开当前页面时进入路由，然后通过静态方法您可以 hold/ASKED 用户是否真的想离开页面。例如：

exampleComponent= React.createClass({
statics:{
        willTransitionFrom: function(transition,component){
            // check any state here or value Aasked the user.
        }
    }
});

它公开了 willTransitionTo 和 willTransitionFrom 生命周期方法。两者都很特别，作为静态很有用，因为您实际上可以在实例化组件之前取消转换。

Answer 5

停止。只需声明一个 class 而不扩展 React.Component 就可以了。

class YourStaticClass {

   static YourMethod(){

   }

}
export default YourStaticClass;

在其他 class 中，您只需导入 class 并触发函数

import YourStaticClass from "whatever";

...
YourStaticClass.YourMethod();
...

使用 ES6 反应静态类

React statics with ES6 classes

ecmascript-6

reactjs

使用 ES6 反应静态 类

React statics with ES6 classes

ecmascript-6

reactjs

使用 ES6 反应静态类