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')
);

以下代码实际上有效，＆＃34; Hello world＆＃34;渲染很好。当我在控制台中启动React调试器时，麻烦就开始了。我希望它能说出以下内容：

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

但相反，它只是说：

<Top Level></Top Level>

如果没有React devtools识别它们，如何呈现<App>？

Answer 1

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

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

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

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

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中被解除，这有助于识别更多不合规包的案例。

使Browserify包与ReactDevTools一起玩得很好

1 个答案: