React Developer Tools 说 'Proxy Component' 而不是组件的名称

Question

我正在使用 Webpack 和 Hot Module Reloading。我还使用 chrome 扩展 React Developer Tools 在开发时检查反应树。当我检查页面并查看组件树时，我想查看实际组件的名称，但是，对于每个组件，名称显示为 Proxy Component.

我可以让您了解有关我的 Webpack 的更多细节，但我什至正在努力 google 解决此问题的正确方法。

以下是我用于 webpack 的工具：

"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.0.0"

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'static'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'client'),
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'stage-0', 'react', 'react-hmre']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
};

Answer 1

您是否尝试分配 displayName 属性？

export const Navbar = (props) => {
  let title = null;
  let menu = null;

  return (
    <header className={style.navbar}>
      <Grid>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12}>
            {title}
            {menu}
          </Col>
        </Row>
      </Grid>
    </header>
  );
};

Navbar.displayName = 'Navbar'; // LIKE THIS

Navbar.propTypes = {
  title: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.node),
};

Answer 2

我认为这是因为您应该将节点环境变量设置为 'production'。在生产模式下，React 会重命名您的组件，它们在 React Developer Tools 中显示为 ProxyComponent。

编辑

您的问题出在热模块替换和 React Transform 上。正如 Dan Abramov 自己所说，当 React 使用 Hot Reloading 时，需要代理组件，代理组件的显示名称是从组件的 displayName 派生的。这就是为什么当你添加一个明确的 displayName 时它起作用的原因，如果你不这样做，React devtools 将回退到 ProxyComponent 模块的名称：ProxyComponent.

React Developer Tools 说 'Proxy Component' 而不是组件的名称

React Developer Tools says 'Proxy Component' instead of the name of the component

reactjs

webpack

webpack-hmr

webpack-hot-middleware