De Ce ReactDOM.createPortal nu funcționează în conținutul script?

Question 1

Am un conținut.tsx fișier cu următorul cod:

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

import Text from './Text';

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

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

"Textul" cod componentă:

import React from 'react';

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

export default Text;

Mi manifest include:

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

După cum puteți vedea, fișierul este încărcat și mesajul Content script ... este afișat în consolă. https://i.stack.imgur.com/GS0gK.png

Dar div cu textul Just text... nu a fost adăugat la corp, cu alte cuvinte, createPortal nu funcționează. https://i.stack.imgur.com/j2geh.png

Question 2

aveți nevoie pentru a scrie createPortal în interiorul return sau render,

astfel:

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

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

aveți nevoie pentru a scrie createPortal în interiorul return sau render,

astfel:

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

Am creat o codesandbox pentru tine, și este de lucru foarte bine, poti sa verifici: codesandbox.io/s/vrajiti-cache-2vfby?file=/src/conținut.jsx
Am verificat, codul nu funcționează în cazul meu, dar am fost în măsură să înțeleagă natura problemei mele, multumesc.

De Ce ReactDOM.createPortal nu funcționează în conținutul script?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie