reactjs - 为什么 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

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

标签： reactjsgoogle-chrome-extensionreact-typescript

Answer 1

你需要在createPortal里面写return或者render，

像这样：

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