Perché ReactDOM.createPortal non funziona nel mio script di contenuto?

Question 1

Ho un contenuto.tsx file con il codice riportato di seguito:

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

import Text from './Text';

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

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

"Testo" codice del componente:

import React from 'react';

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

export default Text;

Il mio manifesto include:

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

Come si può vedere, il file viene caricato e il messaggio Content script ... è stampato nella console. https://i.stack.imgur.com/GS0gK.png

Ma il div con il testo Just text... non è stato aggiunto al corpo, in altre parole, createPortal non funziona. https://i.stack.imgur.com/j2geh.png

Question 2

è necessario scrivere createPortal all'interno return o render,

come questa:

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

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

è necessario scrivere createPortal all'interno return o render,

come questa:

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

Ho creato un codesandbox per voi, e funziona perfettamente, si può check-out: codesandbox.io/s/mago-cache-2vfby?file=/src/contenuto.jsx
Ho controllato, il codice non funziona nel mio caso, ma sono stato in grado di capire la natura del mio problema, grazie.

Perché ReactDOM.createPortal non funziona nel mio script di contenuto?

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria