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

Posted 2023-02-22

【中文标题】在反应组件中，如何在静态函数中获取“this”？

【英文标题】：in a react component, how to get `this` in static function?

【发布时间】：2015-10-13 04:58:50

【问题描述】：

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

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

var Test = React.createClass( 值：5， 静力学： getVal: function() return this.val , 渲染：返回（this.val） ); 测试.getVal(); => 未定义！！

当Test.getVal() 被调用时，this 显然已经失去了它的作用域。如何在getVal() 函数中获取this？

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

Test.getVal.apply( 测试 ); => 未定义

【问题讨论】：

Javascript objects: get parent 的可能重复项

您是否考虑过将 val 存储为组件的 prop 并将 getVal 放在静态块之外？不确定这是否适合您的情况，但应该更容易以这种方式访问​​道具。

@BhojendraNepal - 希望是一样的。将向问题添加示例

@noveyak - 我认为static 的整个想法是它在“常规”javascript 中的组件外部调用，这就是我想要做的

【参考方案1】：

啊，好吧，误会了。如果您需要能够以某种方式随时调用此方法，那么您的 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/

【讨论】：

谢谢，但恐怕我的例子太简单了（而且可能不正确）。我希望得到一般问题的答案，即，如果您不将val 移动到statics 中，您如何从静态函数访问val？你可以吗？如果你做不到，那么静态似乎没什么用。

【参考方案2】：

查看the docs on statics。

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

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