时间戳

首页 > 解决方案 > 当我使用胖箭头作为渲染方法时，为什么 reactjs/mobx 代码不重新渲染？

reactjs - 当我使用胖箭头作为渲染方法时，为什么 reactjs/mobx 代码不重新渲染？

问题描述

这是我的代码：

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?

标签： reactjstypescriptmobx

解决方案

使用render = () => {}你的thisin{'on': this.animating})}>不再绑定到同一个范围！因此，您的 UI 的行为会有所不同。

您必须根据需要找出如何this正确绑定。或者您只是保留语法，因为根本不需要更改方法的语法。

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

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

推荐阅读