为什么 ReactDOM.createPortal 在我的内容脚本中不起作用？

Question

我有一个包含以下代码的 content.tsx 文件：

import React from "react";
import {createPortal} from 'react-dom';

import Text from './Text';

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

createPortal(
    <Text/>,
    document.body
);

“文本”组件代码：

import React from 'react';

const Text = () => {
    return (
        <div>
            Just text...
        </div>
    );
};

export default Text;

我的清单包括：

...other keys
"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["./static/js/content.js"],
      "run_at": "document_end"
    }
]

如您所见，文件已加载，消息 Content script ... 打印在控制台中。 https://i.stack.imgur.com/GS0gK.png

但是div和文本Just text...并没有被添加到正文中，换句话说，createPortal 不起作用。 https://i.stack.imgur.com/j2geh.png

Answer 1

你需要在return或render,

里面写createPortal

像这样：

render() {
    return ReactDOM.createPortal(
         this.props.children,
         document.body
     );
}

为什么 ReactDOM.createPortal 在我的内容脚本中不起作用？

Why ReactDOM.createPortal does not work in my content script?

google-chrome-extension

reactjs

react-typescript