【问题标题】:Unable to modify component props from React DevTools for Chrome无法从 React DevTools for Chrome 修改组件道具
【发布时间】:2016-08-14 18:06:37
【问题描述】:

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

但是,当我使用 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 的情况下运行我的应用程序。他们都没有工作。

版本:

  • 反应 - 15.0.1
  • React 开发工具 - 0.14.9
  • 节点 - v4.4.1
  • Chrome - Mac OSX 上的 49.0.2623.112(64 位)

【问题讨论】:

    标签: reactjs google-chrome-devtools webpack webpack-dev-server webpack-hmr


    【解决方案1】:

    我不知道这是否有资格作为答案,但我还没有超过 50 分,所以我无法添加评论。

    这似乎是由 1 月份首次报告的 React optimization 引起的问题。在该线程的末尾有一个打开的PR 应该可以解决问题。

    【讨论】:

    • 感谢您将我指向 GitHub 项目和 PR。我认为有一个修复程序,但尚未发布。
    猜你喜欢
    • 2019-11-05
    • 2012-02-07
    • 2019-02-27
    • 2020-12-21
    • 2021-04-21
    • 1970-01-01
    • 2019-09-15
    • 1970-01-01
    • 2021-06-26
    相关资源
    最近更新 更多