Proč ReactDOM.createPortal nefunguje v mém content script?

Question 1

Mám obsahu.tsx soubor s následujícím kódem:

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

import Text from './Text';

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

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

"Text" kód součásti:

import React from 'react';

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

export default Text;

Můj manifest obsahuje:

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

Jak vidíte, soubor je načten a zobrazí se zpráva Content script ... je vytištěn v konzole. https://i.stack.imgur.com/GS0gK.png

Ale div s textem Just text... nebyl přidán do těla, jinými slovy, createPortal nefunguje. https://i.stack.imgur.com/j2geh.png

Question 2

musíte napsat createPortal uvnitř return nebo render,

takhle:

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

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

musíte napsat createPortal uvnitř return nebo render,

takhle:

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

Já jsem vytvořil codesandbox pro vás, a funguje to naprosto v pořádku, můžeš se na to podívat: codesandbox.io/s/čarodějníci-cache-2vfby?file=/src/obsah.jsx
Ověřil jsem si, že kód nefunguje, v mém případě, ale byl jsem schopen pochopit podstatu mého problému, díky.

Proč ReactDOM.createPortal nefunguje v mém content script?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii