为什么ReactDOM.createPortal不工作的在我的内容的剧本吗？

Question 1

我有一个内容。多伦多证券交易的文件，与下列代码：

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

Question 2

你需要写 createPortal 内部 return 或 render,

是这样的：

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

Pradip Dhakal · Answer 1 · 2021-11-15T13:13:41

你需要写 createPortal 内部 return 或 render,

是这样的：

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

我已经创建了一个codesandbox，它的工作完全正常的，你可以检查出来： codesandbox.io/s/巫师-cache-2vfby?文件=/src/内容。代码
我查过，代码不起作用在我的情况,但是我能够理解的性质，我的问题了，谢谢。

为什么ReactDOM.createPortal不工作的在我的内容的剧本吗？

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别