Dlaczego ReactDOM.createPortal nie działa w moim scenariuszu treści?

Question 1

Mam plik content.tsx z następującym kodem:

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

import Text from './Text';

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

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

Kod komponentu "Tekst" :

import React from 'react';

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

export default Text;

Mój manifest zawiera:

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

Jak widać, plik został pobrany i komunikat Content script ... drukowany jest w konsoli. https://i.stack.imgur.com/GS0gK.png

Ale div z tekstem Just text... nie został dodany do ciała, innymi słowy, createPortal nie działa. https://i.stack.imgur.com/j2geh.png

Question 2

musisz napisać createPortal wewnątrz return lub render,

podobny do tego:

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

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

musisz napisać createPortal wewnątrz return lub render,

podobny do tego:

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

Stworzyłem dla ciebie codesandbox, i to działa dobrze, czy możesz sprawdzić to: codesandbox.io/s/wizardly-cache-2vfby?file=/src/content.jsx
Sprawdziłem kod nie działa w moim przypadku, ale jestem w stanie zrozumieć naturę mojego problemu, dziękuję.

Dlaczego ReactDOM.createPortal nie działa w moim scenariuszu treści?

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii