为什么ReactDOM.createPortal在浏览器扩展content script中无法生效？

问题原因 #

createPortal 的本质是生成一个特殊的React元素，仅调用该方法不会触发React的渲染流程，必须将它的返回值传入React的渲染接口，才会真正将内容挂载到指定DOM节点上，这就是你能看到控制台日志但DOM没有新增节点的原因。

解决方案 #

根据你使用的React版本选择对应写法即可：

React 17及更早版本 #

修改content.tsx代码如下：

import React from "react";
import { render } from 'react-dom';
import Text from './Text';

console.log(`Content script...`);

// 建议先创建专属挂载容器，避免污染原页面DOM
const extRoot = document.createElement('div');
document.body.appendChild(extRoot);

render(<Text />, extRoot);

React 18及以上版本 #

React 18不再支持render方法，改用createRoot接口：

import React from "react";
import { createRoot } from 'react-dom/client';
import Text from './Text';

console.log(`Content script...`);

const extRoot = document.createElement('div');
document.body.appendChild(extRoot);

const root = createRoot(extRoot);
root.render(<Text />);

如果你确实有使用createPortal的场景（比如组件内部需要将子元素挂载到当前渲染树之外的DOM节点），只需要将createPortal的返回值作为普通React元素放到渲染树中即可，示例：

// 示例：组件内使用Portal
const MyComponent = () => {
  return (
    <div className="normal-content">
      普通内容
      {createPortal(
        <div>Portal挂载的内容</div>,
        document.body
      )}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user17418364