Question

我正在使用transform-class-properties。当我改变按钮文本等内容时，一切正常，但是当我修改看起来像这样的函数时：

// for amount of differences
for (var i=0; i<originalList; i++) {
    ul.children[i].style.display = (i<range) ? "":"none";
}

在手动刷新页面之前没有任何效果。我在控制台中看到了一些输出：

class App extends React.Component {

    fetchUser = (e) => {
        axios.get('/api/test/' + this.state.username)
            .then(function (response) {
                console.log(response.data);
            }).catch(function (response) {
            console.log(response);
        });
    };
}

但是在我刷新之前我的更改不存在。 此功能正在运行（transform-class-properties），但它对于更改是无懈可击的。当我添加[React Transform HMR] Patching App log-apply-result.js?d762:20 [HMR] Updated modules: log-apply-result.js?d762:22 [HMR] - 76之类的内容并按下按钮时没有任何反应。我的意思是什当我更改正常类方法语法的语法时，ES6按照预期理解这个工作，我看到console.log“live”没有刷新，所以我认为在转换过程中出现了问题。

这是我的webpack.development.config.js文件：

console.log('foobar');

Answer 1

这是react-transform相关问题。它修补方法很好。问题是，在这种情况下，fetchUser = (e) => {生成的代码或多或少等于constructor处的绑定。 react-transform不会修补constructor（根据定义运行一次）。

也许这个问题有一天会得到解决，但目前这样的代码并没有解决它。基于功能的组件也存在问题，因为设置无法对这些组件进行修补。

解决该问题的一种方法是将状态管理推送到其他地方，并尽可能依赖标准方法。标准方法可以很好地修补，你可以通过实现热加载接口（几行代码）轻松地使Redux HMR等解决方案兼容。

为什么babel在反应热装载机中没有发现某些功能？

1 个答案: