无法通过Chrome的React DevTools修改组件属性

Question

我正在开发一个React应用程序，并已经设置了webpack来将我的代码打包成捆绑包。

但是，当我在Chrome中加载我的应用程序并使用React DevTools尝试通过扩展修改组件的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 DevTools - 0.14.9 - Node - v4.4.1 - Chrome - 49.0.2623.112（64位）在Mac OSX上

- codematix

Answer 1

我不确定这是否算作答案，但是由于我还没有超过50个积分，所以无法添加评论。

看起来这是一个由React优化引起的问题，该问题最初是在一月份报告的。在那个线程的结尾处，有一个PR是用来修复这个问题的。

- Charlie Weems

---

谢谢您指向 GitHub 的项目和 PR。我认为已经有一个修复方案了，但尚未发布。 - codematix