React Developer Toolsには、コンポーネントの名前の代わりに 'Proxy Component'と表示されます。

Question

WebpackとHot Module Reloadingを使用しています。また、クロムエクステンション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として表示されます。

EDIT

あなたの問題はホットモジュールの交換であり、変換反応します。 Dan Abramov自身が述べたように、Hot Reloading for Reactを使用する場合、コンポーネントをプロキシする必要があり、プロキシコンポーネントの表示名はコンポーネントのdisplayNameから派生しています。そのため、明示的にdisplayNameを追加すると動作します。そうでない場合、devtoolsはProxyComponentモジュールの名前：ProxyComponentに戻ります。