使用React Developer Tools，你可以使用$r来获取对所选React组件的引用。
下面的屏幕截图显示了我使用React Developer Tools来选择一个组件（Explorer），该组件有一个名为nodeList的状态对象。在控制台中，我现在可以简单地写$r.state.nodeList来引用状态中的这个对象。 prop 也是如此（例如：$r.props.path）

你的问题的答案可以在我提出的类似问题中找到：React - getting a component from a DOM element for debugging
我在这里提供一个答案，因为我没有必要的声誉点，以标记为重复或评论以上。
基本上，如果您使用react的开发版本，这是可能的，因为您可以利用TestUtils来实现您的目标。
你只需要做两件事：

• 静态存储从React.render（）获得的根级别组件。
• 创建一个全局调试助手函数，您可以在控制台中使用$0访问您的静态组件。

因此，控制台中的代码可能类似于：

> getComponent($0).props

getComponent的实现可以使用React.addons.TestUtils.findAllInRenderedTree来搜索匹配，方法是在所有找到的组件上调用getDOMNode，并与传入的元素进行匹配。

打开控制台（Firefox，Chrome）并定位任何reactjs渲染的DOM元素，或者执行js脚本来定位它：

document.getElementById('ROOT')

然后在对象属性查看器中检查元素属性，以查找名称以'__reactInternalInstace$....'开头的属性expand _DebugOwner并查看stateNode。
找到的stateNode将包含（如果它有）'state'和'props'属性，这在reactjs应用程序中被大量使用。

虽然公认的答案是有效的，并且是一个很好的方法，但在2020年，你现在可以在不使用$r方法的情况下进行大量检查。React DevTools的Components选项卡会在您选择相关组件时显示props和详细状态（确保您处于正确的级别），还可以让您执行其他操作，例如暂停或检查匹配的DOM元素（右上角的小图标）。

将state或prop对象指定给window对象：

window.title = this.state.title

然后从开发工具控制台，你可以在暴露的对象上尝试不同的方法，比如：

window.title.length

8

您可以像这样将引用附加到窗口对象

import { useSelector } from "react-redux";
function App() {

    // Development only
    window.store = useSelector((state) => state);

    return (
        <div className="App">
        </div>
    );
}

export default App;

然后从控制台访问它

store
{states: {…}}
states:
someProperty: false
[[Prototype]]: Object
[[Prototype]]: Object