Pourquoi ReactDOM.createPortal ne fonctionne pas dans le contenu de mon script?

Question 1

J'ai un contenu.tsx fichier avec le code suivant:

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

import Text from './Text';

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

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

"Texte" code de composant:

import React from 'react';

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

export default Text;

Mon manifeste comprend:

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

Comme vous pouvez le voir, le fichier est chargé et le message Content script ... est imprimé sur la console. https://i.stack.imgur.com/GS0gK.png

Mais le div avec du texte Just text... n'a pas été ajouté au corps, en d'autres termes, createPortal ne fonctionne pas. https://i.stack.imgur.com/j2geh.png

Question 2

vous avez besoin d'écrire createPortal à l'intérieur de return ou render,

comme ceci:

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

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

vous avez besoin d'écrire createPortal à l'intérieur de return ou render,

comme ceci:

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

J'ai créé un codesandbox pour vous, et il fonctionne parfaitement bien, pouvez-vous le vérifier: codesandbox.io/s/wizardly-cache-2vfby?fichier=/src/contenu.jsx
J'ai vérifié, le code ne fonctionne pas dans mon cas, mais j'ai été capable de comprendre la nature de mon problème, merci.

Pourquoi ReactDOM.createPortal ne fonctionne pas dans le contenu de mon script?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie