在反应组件中，如何在静态函数中获取`this`？

Question

正在尝试在 React 组件中创建 static 函数。该函数使用 this 获取其数据，但调用该函数时 this 超出范围。

这是一个非常简单的例子：

var Test = React.createClass({
  val: 5,
  statics: {
    getVal: function() { return this.val }
  },
  render: return( <div>{this.val}</div> )
});

Test.getVal(); => undefined!!

显然 this 在调用 Test.getVal() 时失去了作用域。如何在 getVal() 函数中获取 this？

仅供参考，以下标准 javascript 父方法不起作用：

Test.getVal.apply( Test ); => undefined

Answer 1

啊好误会。如果您需要以某种方式能够随时调用此方法，那么您的 val 也必须位于 statics 中，但是您的渲染函数将必须引用 Test.val 而不是 this.val。如果这不是必需的，但最好坚持 props/state 并从组件内部访问内容，因为组件不会根据 val 的更改自动更新。

var Test = React.createClass({
  statics: {
    val: 5,
    getVal: function() { 
        return this.val
    }
  },
  render: function(){
      return( <div>{Test.val}</div> )
  }
});

console.log('VAL IS' , Test.getVal());

Link 到 fiddle 示例 https://jsfiddle.net/dgoks3Lo/

Answer 2

查看 the docs on statics。

无论你在 statics 中输入什么，都不会有一个实际的 React 组件实例的上下文，但是你定义的 val 属性是一个属性一个实际的 React 组件实例。在您实际渲染组件之前它不会存在，因为那是构造所有非静态属性的时候。静态应该是与组件相关的函数，可以在实际实例的上下文之外使用，就像 C# 和许多其他语言中的静态函数一样。

想要从 statics 函数访问 React 组件实例似乎没有意义。也许您需要考虑一下您实际想要实现的目标。如果您真的希望能够访问特定组件的属性，那么我想您可以将实例作为参数传递给静态函数，但是当然，一旦您实际构建了一个组件，它就可以使用了。

在反应组件中，如何在静态函数中获取`this`？

in a react component, how to get `this` in static function?

javascript

reactjs

this

react-jsx