Question

我试图让WebPack使用在Typescript（.tsx）中编写的ReactJs组件，并利用WebPack的热模块替换。我发现了几个描述如何执行此操作的配方，但它们似乎都有相同的问题 - 如果您在组件类中有一个在render方法中使用的字段，那么在代码中更改它不会触发HMR正确，例如

export default class Counter extends React.Component<ICounterProps, ICounterState> {
        ...
    label: string = 'Counter';
    render() {
        return <h1>{this.label}: {this.state.counter}</h1>;
    }
}

如果您在代码中修改label的值，则不会更新页面。我在我发现的first启动项目中对GitHub提出了一个问题，然后我尝试了更多，他们都有这个问题。这是一个大问题 - 如果你不能确定页面是否会更新，它会使整个HMR变得毫无意义。另请注意，这在vanilla .jsx组件中工作正常。

有没有人有办法让这项工作？任何方向我都会非常感激。

Answer 1

查看第一个＆＃34;已知限制＆＃34;来自https://github.com/gaearon/react-proxy#known-limitations

不替换ES7实例属性

Answer 2

你可以上传你的webpack的配置吗？

您使用Webpack's HMR React's components为react-hot提供了什么样的套餐？ babel-plugin-react-transform或Babel 6？

如果您使用babel-preset-react-hmre，我建议使用Rating，这对我有用。

使用react，typescript和HMR进行WebPack设置

2 个答案: