javascript - 使 Browserify bundle 与 React DevTools 兼容

Question

react 0.13.3

我开始使用 Browserify组织我的前端 React 代码。我也在使用 React Developer Tools用于调试的 Chrome 扩展。但是，我在处理一些非常简单的 React 代码时遇到了问题。

var React = require('react/addons');

//React DEV-TOOLS requires React to be on the global scope. Scope is hidden when bundling
window.React = React;

var App = React.createClass({
    render: function(){
        return (
            <div>
               <p>Hello world</p> <!-- Renders fine -->
            </div>
        )
    }
});

React.render(
    <App />,
    document.getElementById('content')
);

以下代码确实有效，并且“Hello world”呈现良好。当我在控制台中启动 React 调试器时，问题就开始了。我希望它会说以下内容:

<Top Level>
    <App>...</App>
</Top Level>

但相反，它只是说:

<Top Level></Top Level>

如何<App>在没有 React devtools 识别它们的情况下呈现？

Answer 1

似乎有足够多的人偶然发现了这个问题，official guide没有提到这个特殊的症状。在收集到足够的证据后，最好在此处发布答案，即使可能有其他原因导致此 <Top Level></Top Level>问题。

如果包中有多个 React 实例，React DevTools 可能无法工作。这通常与特定组件中不正确的捆绑工具配置(browserify 或 webpack)有关。 React 组件(以及 React 支持的其他库，例如 Mixins)应该总是有 react作为peerDependency在 npm 中，在 browserify/webpack 中作为“外部”。这将使模块的可分发版本不会为自身嵌入 React。此外，如果使用 React 附加组件，“react/addons”可能还必须注册为外部依赖。

如果没有遵循这一点，则仅包含带有 require 的模块(或 ES6 的 import )将使开发工具变得无用。当 React 的另一个实例出现时，该实例会将自己注册为元素树的源，这就是显示空元素的原因。我已经在 react-loaders 中找到了这个错误( issue #2 )，现在从 1.2.3 开始修复。 react-google-maps 可能也会发生同样的情况根据@Carpetfizz 所说，虽然我没有深入研究这个案例。

调试它的一个简单技巧是采用准系统模块 + 网页并迭代添加 require直到 React 开发工具停止工作。找到故障组件后，提出问题。

var React = require('react');
var Loader = require('react-loaders'); // testing react-loaders

var App = React.createClass({
    render: function(){
        return (
            <div>
               <p>Check the React tab!</p>
            </div>
        )
    }
});

React.render(<App />, document.getElementById('container'));

在 React packages for Meteor 中执行了另一个特殊的解决方案。 ，其中开发运行时更改为最后加载 React 的主实例(commit)。

该主题已在问题 #90 中取消，这有助于识别更多不合规包裹的案例。