javascript - 在 react 组件中，如何在静态函数中获取 `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

查看 the docs on statics .

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

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