javascript - React - 从 DOM 元素获取组件以进行调试

Question

为了在控制台中进行调试，React 中是否有任何可用的机制来使用 DOM 元素实例来获取支持的 React 组件？

这个问题之前在生产代码中使用它的上下文中被问过。但是，我的重点是出于调试目的的开发构建。

我熟悉 Chrome debugging extension for React ，但这并非在所有浏览器中都可用。结合 DOM 资源管理器和控制台，可以轻松使用“$0”快捷方式访问有关突出显示的 DOM 元素的信息。

我想在调试控制台中编写类似这样的代码:getComponentFromElement($0). Prop

即使在 React 开发构建中，是否也没有机制可以使用元素的 ReactId 来获取组件？

Answer 1

这是我使用的助手:(已更新以适用于 React <16 和 16+)

function FindReact(dom, traverseUp = 0) {
    const key = Object.keys(dom).find(key=>{
        return key.startsWith("__reactFiber$") // react 17+
            || key.startsWith("__reactInternalInstance$"); // react <17
    });
    const domFiber = dom[key];
    if (domFiber == null) return null;

    // react <16
    if (domFiber._currentElement) {
        let compFiber = domFiber._currentElement._owner;
        for (let i = 0; i < traverseUp; i++) {
            compFiber = compFiber._currentElement._owner;
        }
        return compFiber._instance;
    }

    // react 16+
    const GetCompFiber = fiber=>{
        //return fiber._debugOwner; // this also works, but is __DEV__ only
        let parentFiber = fiber.return;
        while (typeof parentFiber.type == "string") {
            parentFiber = parentFiber.return;
        }
        return parentFiber;
    };
    let compFiber = GetCompFiber(domFiber);
    for (let i = 0; i < traverseUp; i++) {
        compFiber = GetCompFiber(compFiber);
    }
    return compFiber.stateNode;
}

用法:

const someElement = document.getElementById("someElement");
const myComp = FindReact(someElement);
myComp.setState({test1: test2});

注意:此版本比其他答案更长，因为它包含从直接包裹 dom 节点的组件向上遍历的代码。 (如果没有这段代码，FindReact 函数将在某些常见情况下失败，如下所示)

绕过中间组件

假设您要查找的组件 (MyComp) 如下所示:

class MyComp extends Component {
    render() {
        return (
            <InBetweenComp>
                <div id="target">Element actually rendered to dom-tree.</div>
            </InBetweenComp>
        );
    }
}

在这种情况下，调用 FindReact(target) 将(默认情况下)返回 InBetweenComp 实例，因为它是 dom 元素的第一个组件祖先。

要解决此问题，请增加 traverseUp 参数，直到找到所需的组件:

const target = document.getElementById("target");
const myComp = FindReact(target, 1);   // provide traverse-up distance here

有关遍历 React 组件树的更多详细信息，see here .

功能组件

函数组件不像类那样有“实例”，所以你不能仅仅修改 FindReact 函数来返回带有 forceUpdate 的对象， setState等功能组件放在上面。

也就是说，您至少可以获得该路径的 React-fiber 节点，其中包含其属性、状态等。为此，将 FindReact 函数的最后一行修改为:return compFiber;