Yêu cầu thg 10 17, 2019 3:18 SA 142 0 1
  • 142 0 1
+1

How React Developer Tool works ?

Chia sẻ
  • 142 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 CÂU TRẢ LỜI


Đã trả lời 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;
            }
        }
Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí