Neden ReactDOM.createPortal içerik komut dosyamda çalışmıyor mu?

Question 1

Bir içeriğim var.aşağıdaki koda sahip tsx dosyası:

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

import Text from './Text';

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

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

"Metin" bileşen kodu:

import React from 'react';

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

export default Text;

Manifestom şunları içerir:

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

Gördüğünüz gibi, dosya yüklenir ve mesaj Content script ... konsolda yazdırılır. https://i.stack.imgur.com/GS0gK.png

Ama metin ile div Just text... vücuda eklenmedi, başka bir deyişle createPortal çalışmıyor. https://i.stack.imgur.com/j2geh.png

Question 2

yazmak gerekir createPortal içinde return veya render,

bunun gibi:

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

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

yazmak gerekir createPortal içinde return veya render,

bunun gibi:

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

Sizin için bir codesandbox oluşturdum ve gayet iyi çalışıyor, kontrol edebilir misiniz: codesandbox.io/s/wizardly-cache-2vfby?file=/src/content.jsx
Ben kontrol kodu çalışmıyor benim durumda, ama ben mümkün olduğunu anlamak için doğanın benim için sorun değil, teşekkürler.

Neden ReactDOM.createPortal içerik komut dosyamda çalışmıyor mu?

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride