Javascript 使用react、typescript和HMR进行网页设置

我试图让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>;
    }
}

导出默认类计数器扩展React.Component{
...
标签：字符串='计数器'；
render（）{
返回{this.label}:{this.state.counter}；
}
}

如果在代码中修改

标签

的值，则页面不会更新。在我发现的初学者项目中，我在GitHub上提出了一个问题，然后我又尝试了很多，他们都有这个问题。这是一个大问题——如果你不能确定页面是否会更新，那么整个HMR就会变得毫无意义。 另外，请注意，这在vanilla.jsx组件中运行良好

---

有人有办法做到这一点吗？我非常感谢您的指导。

您能上传您的网页配置吗

您使用什么软件包为

React组件的
Webpack的HMR
供电？
react hot
或
babel插件react transform

如果您使用的是
Babel 6
，我建议您使用
Babel preset react hmre
，这对我来说非常有效。
请参阅


不替换ES7实例属性

总的来说，我的重点是
反应转换
，因为这是一种较新的方法。您可以在我引用的repo（）中看到webpack.config。我也试过了。他们都有相同的问题。我还尝试添加您提到的react-hmre预设，但仍然没有成功：-（FWIW，HMR+react存在许多问题。它对于特定类别的更改（例如，更改“渲染”方法）非常有效，但许多其他更改并不真正适合react-proxy的世界视图（基本上只是尝试代理React组件）。作为一个简单的示例，对arrow函数的更改不会生效（请参阅）.重点是，我认为HMR更像是一个助手，而不是一个完整的解决方案。有时你只需要重新加载页面。啊，我不知道，我有点希望它能识别任何变化，就像手表模式一样。如果它是你说的，那么它对我来说似乎没什么用，我的意思是，如果你一直想知道有什么意义无论您的代码是错误的，还是HMR没有发现更改……我最终确认这是一个已知的限制。请参阅下面的答案。很好，感谢您澄清了这个谜团，至少这让我知道了我可以和不能期望的工作。