为什么当我使用脂肪箭头，渲染方法reactjs / mobx代码不会重新解析？

Question

这里是我的代码：

import React, {Component} from 'react';
import * as mobx from 'mobx';
import * as mobxReact from 'mobx-react';
import classNames from 'classnames';

import './CssClassApp.css';


@mobxReact.observer
export class CssClassApp extends Component {
    @mobx.observable.ref clapping: boolean = false;

    @mobx.action.bound
    startAnimate() {
        this.animating = true;
        setTimeout(() => this.stopAnimate(), 2000);
    };

    @mobx.action.bound
    stopAnimate() {
        console.log(`Stopping animation`)
        this.animating = false;
    };

    render() {
        return (
            <div>
                <input
                    className="button"
                    type="button"
                    value="Test"
                    onClick={this.startAnimate}
                />
                <div style={{transition: `border 1500ms ease-out`}}
                    className={classNames('normal', 
                        {'on': this.animating})}>
                    Testing timeout
                </div>
            </div>
        );
    }
}

以及相关的CSS

.on {
    border: 5px solid red;
}

.normal {
    height: 100px;
    widows: 100px;
}

它工作正常。

但是，如果我改变render方法render = () =>边界在所有不褪色英寸

为什么？这到底是怎么造成此错误：react，mobx或typescript？

Answer 1

在render = () => {}使用this你{'on': this.animating})}>不绑定到相同的范围了！因此，你的UI表现不同。

你必须找出如何绑定this正确地根据您的需要。或者你只是离开了语法是，因为不应该有任何需要改变方法的语法可言。

这可能是一个很好的信息来源：

https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881