javascript - react : Cleanest way of accessing component without using "this"

标签 javascript reactjs

我需要在处理函数中嵌套的函数中访问 React 组件。

在嵌套函数中时,this 不提供对组件的引用

所以我明确地声明了它,而不是像往常一样执行 this.setState(...)

有没有比我的以下代码更简洁的方法来做到这一点?

React.createClass({

    uploadImage : function() {
    ...
    var componentReference = this

    xhrRequest.onreadystatechange = function()
        {if(request.readyState==4) {
        componentReference.setState({uploadStatus: request.status});
        }
    }

最佳答案

这就是 JavaScript 的工作原理:

  1. 您必须保留对在不同上下文中调用的函数中要访问的任何内容的引用(就像您使用变量实现它一样)...

  1. …绑定(bind)this 在调用函数时指向的内容。不需要使用库(如 lodash),因为 ECMAScript 5.1 有他的内置,你可以在任何最新的浏览器(Chrome 7+、Firefox 4+、IE 9+、Safari 5.1+)中使用它,请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

如果您需要支持旧版浏览器,您可以自己实现一个bind 函数,例如参见Underscore.js 的Function.prototype.bind 实现:http://underscorejs.org/#bind

关于javascript - react : Cleanest way of accessing component without using "this",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31501216/

相关文章:

javascript - Jest - React 组件中的模拟粗箭头功能

javascript - 如何通过 JavaScript 获取媒体查询定义的当前 CSS 值?

javascript - 无论验证如何提交表单

在 iOS 上调用 "TypeError: Load Failed"时出现 Javascript "fetch"错误

reactjs - React Native - React Navigation 无法在 DrawerContent 中使用 Hooks

reactjs - 使用react-app-rewired和customize-cra添加Webpack别名

javascript - React Collapse - 如何切换列表中的项目?

javascript - 如何更改 React-bootstrap-daterangepicker 中的美国默认日期格式输入字段

javascript - ReactJS 获取 - 正文 : json. stringify

javascript - 如何将模板数据导入Ajax版Smart Admin主题?