Реагировать на модалы, видимые в течение доли секунды при загрузке страницы - PullRequest
Новая
       11

Реагировать на модалы, видимые в течение доли секунды при загрузке страницы

0 голосов
/ 29 апреля 2019

Я рендеринг модалов в React.

Мой index.html выглядит следующим образом: 

<div id="root"></div>
<div id="modal"></div>

И все мои модалы отображаются (через портал) как потомок .modal.

Каждый модальный элемент имеет следующую форму: 

<div class="modal-background open">
    <!-- children -->
</div>

Где класс может быть modal-background open или modal-background closed.Весь компонент: 

interface OwnProps {
    children: React.ReactNode
    isOpen: boolean
    onExit: () => void
}

export class Modal extends React.Component<OwnProps, any> {

    _exit = () => this.props.onExit();

    _renderModal = () => (
        <div className={`modal-background ${this.props.isOpen ? "open" : "closed"}`} onClick={this._exit}>
            {this.props.children}
        </div>
    );

    render() {
        if (this.props.isOpen) {
            document.body.className += " no-scroll";
        } else {
            document.body.classList.remove("no-scroll");
        }
        let elem = document.querySelector("#modal");
        if (elem == null) {
            console.log("Could not render modal.");
            return null;
        }
        return ReactDOM.createPortal(this._renderModal(), elem);
    }
}

И CSS выглядит так: 

.modal-background {
    /* Other styling - this a dark backdrop for a modal child */
    background-color: rgba(0,0,0,0.2);
    transition: opacity 150ms ease-out;

    &.closed {
        opacity: 0; 
        pointer-events: none;
    }

    &.open {
        pointer-events: all;
        opacity: 1; 

        &:hover {
            cursor: pointer;    
        }
    }
}

Так что мой модал используется как <Modal><CustomModalElement/></Modal>.

Когда я загружаю страницу, мои модальные элементы кратковременно мигают, показывая, что они не скрыты при загрузке (но через доли секунды после этого).

Я могу это исправить, добавив display: none и display: inherit в css, но затем япропустить хорошие переходы.

Есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 24 мая 2019

Не уверен, что вам нужно делать что-то еще внутри вашего index.html файла, кроме 

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal"></div>

А для вашего Modal.js вы можете попробовать что-то вроде этого: 

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

const Modal = props => {
  return ReactDOM.createPortal(
    <div className="ui dimmer modals visible active">
      <div className="ui standard modal visible active">
        <div className="header">Delete Object</div>
        <div className="content">
          Are you sure you want to delete this?
        </div>
        <div className="actions">
          <button className="ui primary button">Delete</button>
          <button className="ui button">Cancel</button>
        </div>
      </div>
    </div>,
    document.querySelector("#modal")
  );
};

export default Modal;

и затем внутри вашего другого компонента, где пользователь выполнит модальное: 

import React from "react";
import Modal from "../Modal"; // or wherever your Modal is in the file tree

const ObjectDelete = () => {
  return (
    <div>
      ObjectDelete
      <Modal />
    </div>
  );
};

export default ObjectDelete;

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

...