Question

在构建我的第一个reactjs组件时，我熟悉了＃34; undefined不是一个函数＆＃34;尝试使用帮助器（makeWorkSiteUrl）时，因为this范围已经远离组件的范围。

当然，我只是做了大多数JS开发人员会做的事情并在我调用函数来解决问题之前声明that=this。

但是，我想到这可能是一个常见的问题。所以可能会有一个更好的＆＃39;或者＆＃39;反应＆＃39;实现同样的事情的方式。或者，它可能表明该组件的设计不佳。是否有首选或可用的样式或方法而不是that=this来访问组件内部函数/属性？

＆＃34;未定义不是函数＆＃34;：

var WorkSiteQuickList = React.createClass({
    propTypes: {
        data: React.PropTypes.object.isRequired     
    },
    render() {
        var workSiteNodes = this.props.data.work_sites.map(function (worksite) {
            var linkUrl = this.makeWorkSiteUrl(worksite.id) //Fail  
            return (
                <WorkSiteQuickListItem workSiteName={worksite.name} linkUrl={linkUrl} />
            );
        });
        return (
                <div>    
                    {workSiteNodes}             
               </div>
        );
    },
    makeWorkSiteUrl(workSiteId) {
        return "/worksite/"+ workSiteId;
    }   
});

按预期工作：

var WorkSiteQuickList = React.createClass({
    propTypes: {
        data: React.PropTypes.object.isRequired     
    },
    render() {
        that = this;
        var workSiteNodes = this.props.data.work_sites.map(function (worksite) {
            var linkUrl = that.makeWorkSiteUrl(worksite.id) //OK  
            return (
                <WorkSiteQuickListItem workSiteName={worksite.name} linkUrl={linkUrl} />
            );
        });
        return (
                <div>    
                    {workSiteNodes}             
               </div>
        );
    },
    makeWorkSiteUrl(workSiteId) {
        return "/worksite/"+ workSiteId;
    }   
});

我确定这个问题会被关闭，但我宁愿问它而不是错过＆＃34;框架的关键部分＆＃34;。

Answer 1

以下是一些处理this范围界定的常见模式：

利用es6转换器（就像你当前正在使用的JSX转换器，或恰好支持JSX的babeljs），使用范围为外部上下文的箭头函数（又名词法范围） ）。
```
 this.props.data.work_sites.map( (worksite) => { .... return ... } )
```
传递this作为Array#map的第二个参数
链接绑定到您传递到Array#map
的函数
```
function() {}.bind(this)
```

更新：我在=>时遇到了很多麻烦，this在 chrome dev工具的断点暂停时解析为window 在render()方法中。最初我认为这是一个babeljs bug。但是，事实证明，开发工具无法理解源地图实际上会将this替换为_this。

在reactjs组件中确定'this'

1 个答案: