Почему ReactDOM.createPortal не работает в моем сценарии контента?

Question 1

У меня есть файл content.tsx со следующим кодом:

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

import Text from './Text';

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

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

Код компонента "Текст" :

import React from 'react';

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

export default Text;

Мой манифест включает в себя:

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

Как вы можете видеть, файл загружен и сообщение Content script ... печатается в консоли. https://i.stack.imgur.com/GS0gK.png

Но div с текстом Just text... не был добавлен в тело, другими словами, createPortal не работает. https://i.stack.imgur.com/j2geh.png

Question 2

тебе нужно написать createPortal внутри return или render,

подобный этому:

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

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

тебе нужно написать createPortal внутри return или render,

подобный этому:

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

Я создал для вас codesandbox, и он отлично работает, можете ли вы проверить это: codesandbox.io/s/wizardly-cache-2vfby?file=/src/content.jsx
Я проверил, код не работает в моем случае, но я смог понять природу моей проблемы, спасибо.

Почему ReactDOM.createPortal не работает в моем сценарии контента?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории