Asked thg 10 17, 2019 3:18 SA 129 0 1
  • 129 0 1
+1

How React Developer Tool works ?

Share
  • 129 0 1

Mình thắc mắc 1 điều là cách react developer tool hoạt động, chỉ cần imspect 1 element và click component là nó có thể show tất cả cấu trúc của component render ra element đó ra, đồng thời lưu vào biến window.$r Vậy làm sao nó có thể làm được điều đó nhỉ và làm sao để làm điều tương tự, mình muốn sửa proto của react component. xin cảm ơn

1 ANSWERS


Answered thg 10 17, 2019 8:31 SA
+1
window.FindReact = function(dom) {
            let key = Object.keys(dom).find(key => key.startsWith("__reactInternalInstance$"));
            let internalInstance = dom[key];
            if (internalInstance == null) return null;

            if (internalInstance.return) { // react 16+
                return internalInstance._debugOwner
                    ? internalInstance._debugOwner.stateNode
                    : internalInstance.return.stateNode;
            } else { // react <16
                return internalInstance._currentElement._owner._instance;
            }
        }
Share
Viblo
Let's register a Viblo Account to get more interesting posts.