使用 ReactDevTools 让 Browserify 包玩得很好

Question

反应 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>

如果没有 React 开发工具识别<App>，如何渲染它们？

Answer 1

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

如果捆绑包中有多个 React 实例，React DevTools 可能无法工作。这通常与特定组件中不正确的捆绑工具配置（browserify 或 webpack）有关。 React 组件（以及 React 支持的其他库，例如 Mixins）在 npm 中应始终将 react 作为 peerDependency 并在 browserify/webpack 中作为“外部”。这将使模块的可分发版本不会为自己嵌入 React。此外，如果使用 React 插件，“react/addons”可能还需要注册为外部依赖项。

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

一个简单的调试技巧是使用准系统模块 + 网页并迭代添加 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 中解除，这有助于识别更多不合规包的案例。