我正在开发一个 React 应用程序,并设置了 webpack 将我的代码打包到 bundle 中。
但是,当我使用 React DevTools 在 Chrome 中加载应用程序并尝试通过扩展修改组件的 props 时,它不会更改值或使用新值重新渲染。
下面是我的webpack.config.js
'use strict';
const webpack = require('webpack')
module.exports = {
entry: {
agile: './client/js/agile.jsx.js',
vendor: [
'domready',
'react',
'react-dom',
'classnames'
]
},
output: {
filename: '[name].bundle.js',
path: 'public/js',
publicPath: '/js/'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({names: ['vendor'], minChunks: Infinity}),
new webpack.HotModuleReplacementPlugin()
],
target: 'web',
devtool: 'source-map',
stats: {
color: true,
modules: false,
reasons: false
},
devServer: {
hot: true,
inline: true,
contentBase: './public/'
}
};
如果我做错了什么,请告诉我。
我还尝试删除上面使用的 HotModuleReplacementPlugin
并在没有 webpack-dev-server
的情况下运行我的应用程序。他们都没有工作。
版本:
- react - 15.0.1
- React 开发工具 - 0.14.9
- 节点 - v4.4.1
- Chrome - Mac OSX 上的 49.0.2623.112(64 位)
最佳答案
我不知道这是否符合答案,但我还没有超过 50 分,所以我无法添加评论。
看起来这是由 React optimization 引起的问题这是一月份首次报道的。在该线程的末尾有一个打开的 PR这应该可以解决问题。
关于reactjs - 无法从适用于 Chrome 的 React DevTools 修改组件属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36771292/