从 JavaScript 控制台查找和操作 React.js 组件答案

【问题标题】：Find and manipulate a React.js component from the JavaScript console从 JavaScript 控制台查找和操作 React.js 组件
【发布时间】：2015-07-03 15:17:38
【问题描述】：

当我使用 JS 时，我倾向于为浏览器创建一个控制台并即时操作值。

我有一个页面，我使用 React 来渲染一些组件，并且我认为能够从控制台操纵它的状态来调试一个设计怪癖会很棒，该怪癖只有在组件位于极端情况。

我遇到了无法获取对我的组件的引用的问题。

我想可能有一个活动组件列表当前正在某个地方呈现，但我无法在 React 全局对象或其他任何地方找到一个。

是否存在对正在渲染的组件的公开引用？

我正在像这样渲染组件：

<script>React.render(React.createElement(Comp, domElem))</script>

我可以存储对React.createElement() 的结果的引用，但它是seems to be an antipattern。此外，我使用 ReactJS.NET 库为我处理服务器端渲染，因此生成了整个 React.render 行并且很难修改。

我的另一个想法是创建一个 mixin，使组件在挂载时显式暴露自己，例如：

var ActiveComponents = [];
var debugMixin = {
    componentDidMount: function () {
        var id = this.getDOMNode().id;
        ActiveComponents[id] = {
            id: id,
            getState: () => { return this.state; },
            setState: (state) => { this.setState(state); },
            comp: this
        };
    }
};

这样的方法有缺点吗？这和上面提到的反模式是一样的吗？

虽然比直接在组件代码中纠缠这些测试钩子要干净得多，但添加 mixin 仍然是一种修改，如果可能的话，我想避免这种情况。

我希望得到答案的问题以粗体显示。

【问题讨论】：

标签： javascript console reactjs

【解决方案1】：

解决方法是将您的对象分配给窗口对象：

window.myStateObject = myStateObject

然后你可以在控制台中检查它：

window.myStateObject

【讨论】：

【解决方案2】：

有一个适用于 Chrome 的 ReactJS 扩展程序可以满足您的需求 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

如果这还不够好，React 会在私有变量 instancesByReactID 中跟踪所有已安装的组件。如果您只想访问这些进行调试，您可以修改 React 代码并将该变量公开为全局变量。

【讨论】：