Открытие нового портала React открывает только пустую страницу без содержимого - PullRequest
Новая
       5

Открытие нового портала React открывает только пустую страницу без содержимого

0 голосов
/ 09 апреля 2020

Я пытаюсь открыть портал React, но у меня возникают некоторые проблемы:

Вот где находится кнопка открытия: 

return (
    <div id="mainContent">
        <table>
            <td> <button onClick={() => { setIsPortalOpen(!isPortalOpen); }}>{row.original.title}</button> </td>
        </table>

        {isPortalOpen && (
            <Window>
                <MyPortal />
            </Window>
        )}
    </div>
)

Когда я нажимаю кнопку, окно открывается, но оно пустое и показывает только заголовок: "Окно реагирующего портала"

И содержит только пустой div: div = "window-container">

Здесь это функция, которая содержит портал: 

const [isPortalOpen, setIsPortalOpen] = useState(false);

function MyPortal() {
    return ReactDOM.createPortal(
        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>,
        document.body
    )
}

Вот код для Window. js: 

import React from "react";
import ReactDOM from "react-dom";

export default class Window extends React.Component {
constructor(props) {
    super(props);
    this.state = { win: null, el: null };
}

componentDidMount() {
    let win = window.open("", "", "width=600,height=400,");
    win.document.title = "A React portal window";
    let el = document.createElement("div");
    el.id = "window-container";
    win.document.body.appendChild(el);
    this.setState({ win, el });
}

componentWillUnmount() {
    this.state.win.close();
}

render() {
    const { el } = this.state;
    return el ? ReactDOM.createPortal(this.props.children, el) : null;
}

}

Итак, как я уже сказал, окно открывается, когда я нажимаю кнопку, но оно пустое.

Кроме того, когда я нажимаю кнопку, содержимое отображается в самом низу родительской страницы: 

        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>

Вот мой индекс. js: 

ReactDOM.render(
    <React.Fragment>
        <MainProjects />
        <div id="portal-root"></div>
    </React.Fragment>,
    document.getElementById('root')
)

Но это то, чем я хочу быть в окне портала.

Так что я не совсем уверен, почему это происходит.

Что я могу сделать, чтобы это исправить?

Спасибо!

1 Ответ

1 голос
/ 09 апреля 2020

Вместо создания портала на теле. Создайте новый div в своем индексе. html и присвойте ему идентификатор 

<div id="portal-root"></div>

И измените свой компонент MyPortal на этот 

const [isPortalOpen, setIsPortalOpen] = useState(false);
const portalRoot = document.getElementById('portal-root')
function MyPortal() {
    return ReactDOM.createPortal(
        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>,
        portalRoot
    )
}

Так что в вашем случае вы монтируются на корпусе, который удаляет весь пользовательский интерфейс, а также основной root элемент React.

...