IT技术 - 使用 ReactDevTools 使 Browserify 包很好玩 - 吾爱随笔录

使用 ReactDevTools 使 Browserify 包很好玩

IT技术 javascript reactjs browserify

2021-05-11 05:18:31

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 识别它们，如何呈现？

1个回答

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

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

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

调试此问题的一个简单技巧是采用准系统module + 网页并迭代添加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'));

另一个特殊的解决方案是在Meteor的React 包中进行的，其中开发运行时被更改为最后加载 React 的主实例（commit）。

这个主题在 issue #90 中被取消，这有助于识别更多不合规包的情况。

其它你可能感兴趣的问题

上一篇使用 React 路由器时出现此错误 TypeError: type.toUpperCase is not a function 下一篇为什么在 prevState/prevProps 与 this.state/this.props 相同时触发 componentDidUpdate