Prečo ReactDOM.createPortal nefunguje v mojom obsah skriptu?

Question 1

Mám obsahu.tsx súbor s nasledujúcim kódom:

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

import Text from './Text';

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

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

"Text" komponent kód:

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"
    }
]

Ako môžete vidieť, súbor je načítaný a správa Content script ... je vytlačený v konzole. https://i.stack.imgur.com/GS0gK.png

Ale div s textom Just text... nebola pridaná na telo, inými slovami, createPortal nefunguje. https://i.stack.imgur.com/j2geh.png

Question 2

potrebujete napísať createPortal vo vnútri return alebo render,

ako toto:

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

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

potrebujete napísať createPortal vo vnútri return alebo render,

ako toto:

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

Ja som vytvoril codesandbox pre vás, a že to funguje úplne v poriadku, môžete si to vyskúšať: codesandbox.io/s/wizardly-cache-2vfby?file=/src/obsah.jsx
Overil som si, kód nefunguje v mojom prípade, ale bol som schopný pochopiť podstatu môj problém, ďakujem.

Prečo ReactDOM.createPortal nefunguje v mojom obsah skriptu?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii