如何检测 HTML 元素是否是 React 组件的根？

Question

有没有办法检测 HTML 元素是否是生产应用程序中任何 React 组件的根？

我不是指检测一个元素是否是整个React 应用程序的根，而是检测一个元素是否是任何组件的根。

为了显示：

假设我们有以下 React 组件：

const FooBar = () => {
  return (
    <div className="foobar">
      <span> foo </span>
      <button> bar </button>
    </div>
  );
}

const Container = () => {
  return (
    <div>
      <a className="john"> john </a>
      <a> doe </a>
      <FooBar />
    </div>
  );
}

转换为以下 HTML：

<div>
  <a class="john"> john </a>
  <a> doe </a>
  <div class="foobar">
    <span> foo </span>
    <button> bar </button>
  </div>
</div>

在生产部署中，有没有办法通过 chrome 扩展（外部脚本）来做到这一点？ 如何？

const foobarDiv = document.querySelector('div.foobar');
const span = document.querySelector('span');
const a = document.querySelector('a.john');
isReactComponentRoot(foobarDiv); // true
isReactComponentRoot(span); // false
isReactComponentRoot(a); // false

Answer 1

我不知道这在未来是否会继续可靠，但有一段时间的工作是检查它是否具有_reactRootContainer属性。

 const root = document.querySelector('.react'); const App = () => { return <div className="child"></div>; }; ReactDOM.render(<App />, root); console.log(root.hasOwnProperty('_reactRootContainer')); console.log(root.querySelector('.child').hasOwnProperty('_reactRootContainer'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Answer 2

我有这个确切的需求，ReactDom 内部有一个内部 function 来确定 domNode 是否是反应根。

我认为这样做的厚颜无耻的方法是查看 domNode 是否具有以 _react 开头的道具。