reactjs - How to Get React Element Props from HTML Element with Javascript? - Stack Overflow

admin管理员组

文章数量:1355234

I can inspect a ponent's props with the React developer tools. Is it possible to get the ponent's props from its corresponding HTML element from the console without using the developer tools?

The solution would be something like this:

const someElement = document.querySelector('.some-element')
getElementReactProps(someElement)

I tried to inspect the HTML element's properties __reactFiber$at69yqn7c1k and __reactProps$at69yqn7c1k but couldn't find any of its props that I see in the React developer tools.

I have also found other stack overflow threads but none of them worked. (React - getting a ponent from a DOM element for debugging, React - get React ponent from a child DOM element?, How do you inspect a react element's props & state in the console?)

Any ideas?

I can inspect a ponent's props with the React developer tools. Is it possible to get the ponent's props from its corresponding HTML element from the console without using the developer tools?

The solution would be something like this:

const someElement = document.querySelector('.some-element')
getElementReactProps(someElement)

I tried to inspect the HTML element's properties __reactFiber$at69yqn7c1k and __reactProps$at69yqn7c1k but couldn't find any of its props that I see in the React developer tools.

I have also found other stack overflow threads but none of them worked. (React - getting a ponent from a DOM element for debugging, React - get React ponent from a child DOM element?, How do you inspect a react element's props & state in the console?)

Any ideas?

• javascript
• reactjs

Share Improve this question Follow edited Dec 29, 2021 at 9:21 Anatol Zakrividoroga asked Dec 28, 2021 at 12:49 Anatol ZakrividorogaAnatol Zakrividoroga 4,54822 gold badges3232 silver badges5757 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

React does seem to store the correct properties in some parent elements, but not in child elements.
The code below works by walking down the path from the given parent to the target child in the react prop tree, after tracing it from the DOM tree. I've only tested it with a single app but I believe it works with all elements created by React 17+.

function getReactProps(parent: Element, target: Element): any {
    const keyof_ReactProps = Object.keys(parent).find(k => k.startsWith("__reactProps$"));
    const symof_ReactFragment = Symbol.for("react.fragment");

    //Find the path from target to parent
    let path = [];
    let elem = target;
    while (elem !== parent) {
        let index = 0;
        for (let sibling = elem; sibling != null;) {
            if (sibling[keyof_ReactProps]) index++;
            sibling = sibling.previousElementSibling;
        }
        path.push({ child: elem, index });
        elem = elem.parentElement;
    }
    //Walk down the path to find the react state props
    let state = elem[keyof_ReactProps];
    for (let i = path.length - 1; i >= 0 && state != null; i--) {
        //Find the target child state index
        let childStateIndex = 0, childElemIndex = 0;
        while (childStateIndex < state.children.length) {
            let childState = state.children[childStateIndex];
            if (childState instanceof Object) {
                //Fragment children are inlined in the parent DOM element
                let isFragment = childState.type === symof_ReactFragment && childState.props.children.length;
                childElemIndex += isFragment ? childState.props.children.length : 1;
                if (childElemIndex === path[i].index) break;
            }
            childStateIndex++;
        }
        let childState = state.children[childStateIndex] ?? (childStateIndex === 0 ? state.children : null);
        state = childState?.props;
        elem = path[i].child;
    }
    return state;
}

Example usage:

let itemRow = document.querySelectorAll("#item-row")[2];
let menuBtn = itemRow.querySelector("#more-button");
let props = getReactProps(itemRow, menuBtn);
//This may also work:
let props = getReactProps(menuBtn.parentElement, menuBtn);

本文标签： reactjsHow to Get React Element Props from HTML Element with JavascriptStack Overflow