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

Question

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

我有一个页面，我使用 React 来渲染一些组件，我有一个想法，那就是能够从控制台操纵它的状态以调试一个设计怪癖，该怪癖只有在组件处于极端情况时才可见状态。

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

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

是否有对正在呈现的组件的公开引用？

我正在渲染组件，如：

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

我可以存储对结果的引用，React.createElement()但它似乎是一个反模式。此外，我正在使用 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 仍然是一种修改，如果可能的话，我想避免这种情况。

我希望得到答案的问题是粗体的。

Answer 1

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

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