在一个反应​​组件中，如何在静态函数中得到`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()时失去了范围。如何在this函数中获取getVal()？

fyi，以下标准的javascript父方法不起作用：

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

Answer 1

查看the docs on statics。

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

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

Answer 2

啊，好吧误会。如果你需要以某种方式调用这个方法，那么你的val也必须位于静态中，但你的渲染函数必须引用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());

通过示例https://jsfiddle.net/dgoks3Lo/

链接到小提琴