如何在同构React App中使用特定于浏览器的API？

Question

我在服务器端使用react时正在阅读几个style guides，并且它们（正确地）似乎都表明组件应该是states和props的纯函数。 / p>

这引出一个问题，如果我要使用DOM API，请说window.innerWidth或canvas.getContext()，这是根据react + flux哲学这样做的最佳位置。

Answer 1

componentDidMount只会在客户端执行，您可以在那里放置特定于浏览器的代码。

但如果还不够，我建议你使用DefinePlugin，如果你更喜欢webpack作为你的构建工具。（我相信如果你更喜欢其他构建工具，插件提供相同的功能）

new webpack.DefinePlugin({
  __CLIENT__: true
})

并使用条件语句来判断代码是否在浏览器环境中执行。