Por Qué ReactDOM.createPortal no funciona en el contenido de mi script?

Question 1

Tengo un contenido.tsx archivo con el siguiente código:

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

import Text from './Text';

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

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

"Texto" código de componente:

import React from 'react';

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

export default Text;

Mi manifiesto incluye:

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

Como se puede ver, se carga el archivo y el mensaje Content script ... se imprime en la consola. https://i.stack.imgur.com/GS0gK.png

Pero el div con el texto Just text... no se agregó en el cuerpo, en otras palabras, createPortal no funciona. https://i.stack.imgur.com/j2geh.png

Question 2

usted necesita para escribir createPortal dentro de return o render,

como este:

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

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

usted necesita para escribir createPortal dentro de return o render,

como este:

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

He creado un codesandbox para usted, y funciona perfectamente bien, puedes echarle un vistazo: codesandbox.io/s/mago-cache-2vfby?archivo=/src/contenido.jsx
Que yo sepa, el código no funciona en mi caso, pero yo era capaz de entender la naturaleza de mi problema, gracias.

Por Qué ReactDOM.createPortal no funciona en el contenido de mi script?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría