Por ReactDOM.createPortal não funciona na minha conteúdo do script?

Question 1

Eu tenho um conteúdo.tsx arquivo com o código a seguir:

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

import Text from './Text';

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

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

"Texto" código do componente:

import React from 'react';

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

export default Text;

Meu manifesto inclui:

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

Como você pode ver, o arquivo é carregado e a mensagem Content script ... é impressa no console. https://i.stack.imgur.com/GS0gK.png

Mas a div com o texto Just text... não foi adicionado ao corpo, em outras palavras, createPortal não funciona. https://i.stack.imgur.com/j2geh.png

Question 2

você precisa escrever createPortal dentro return ou render,

como esta:

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

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

você precisa escrever createPortal dentro return ou render,

como esta:

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

Eu criei um codesandbox para você, e ele esta funcionando perfeitamente bem, você pode check-out: codesandbox.e / s/s/de magos-em cache-2vfby?arquivo=/src/conteúdo.jsx
Eu verifiquei, o código não funciona no meu caso, mas eu era capaz de entender a natureza do meu problema, obrigado.

Por ReactDOM.createPortal não funciona na minha conteúdo do script?

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria