使用 ES6 类反应静态

Posted 2023-02-22

【中文标题】使用 ES6 类反应静态

【英文标题】：React statics with ES6 classes

【发布时间】：2015-06-08 14:22:51

【问题描述】：

静态对象是否适用于 React 中的 ES6 类？

class SomeComponent extends React.Component 

  render() 
    // ...
  



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

当我执行SomeComponent.someMethod() 时，上面的内容给了我未定义的方法someMethod

【参考方案1】：

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

class SomeComponent extends React.Component 

  static someMethod() 
    //...
  

  render() 
    // ...
  

---

关于

React.statics =  ... 

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

【讨论】：

请注意，babel 和 jsx 工具支持静态属性（例如 static propTypes = ...）；但只是一个 ES7 提案。静态方法是 ES6。

这样做我总是得到Cannot read property '_currentElement' of null 错误，而没有静态修饰符的相同方法可以正常工作。我没有在我的方法中使用任何类变量...

【参考方案2】：

虽然statics 仅适用于React.createClass，但您仍然可以用 ES6 表示法编写静态方法。如果你使用的是 ES7，那么你也可以写静态属性。

您可以通过这种方式在 ES6+ 类中编写静态：

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

    static someMethod()
    

或者像这样在课外：

class Component extends React.Component 
   ....


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

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

【讨论】：

请注意 propTypes = … 不是 ES6 表示法。

你是对的，这似乎是 ES7 属性初始化符号。 facebook.github.io/react/blog/2015/01/27/…

要使用 ES7，你必须 npm install babel-preset-stage-0 然后将 "stage-0" 添加到 .babelrc 中，如下所示："presets": ["es2015", "react", "stage-0"]

【参考方案3】：

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

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

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

【参考方案4】：

停下来。只需声明一个类而不扩展 React.Component 即可。

class YourStaticClass 

   static YourMethod()

   


export default YourStaticClass;

在其他类中， 你可以简单地导入你的类并触发函数

import YourStaticClass from "whatever";

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

【参考方案5】：

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

【讨论】：

OP没有react组件吗？

这正是您的答案。什么是 OP？

"OP" 指问题或写问题的人。也许你只是措辞有点奇怪，因为这绝对是一个 React 组件。它不是用React.createClass 创建的。