2

我试图让 WebPack 与用 Typescript (.tsx) 编写的 ReactJs 组件一起工作，并利用 WebPack 的热模块替换。我找到了几个描述如何做到这一点的食谱，但它们似乎都有同样的问题——如果你的组件类上有一个在渲染方法中使用的字段，那么在代码中更改它不会正确触发 HMR ，例如

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

如果修改label代码中的值，则页面不会更新。我在找到的第一个入门项目中在 GitHub 上提出了一个问题，然后我又尝试了一堆，他们都有这个问题。这是一个大问题——如果你不能确定页面是否会更新，它会使整个 HMR 变得毫无意义。另外，请注意，这在原版 .jsx 组件中运行良好。

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

4

2 回答 2

1

请参阅https://github.com/gaearon/react-proxy#known-limitations中的第一个“已知限制”

  • 不替换 ES7 实例属性
于 2016-01-25T13:57:55.110 回答
0

你能上传你的webpack的配置吗？

你用什么包来Webpack's HMR供电React's components？ react-hot还是babel-plugin-react-transform？

如果你使用Babel 6我会推荐使用babel-preset-react-hmre，这对我很有效。

于 2016-01-24T21:57:18.257 回答