Извлечение HTML из компонента React без состояния, который был передан в событие триггера - PullRequest
Новая
       17

Извлечение HTML из компонента React без состояния, который был передан в событие триггера

0 голосов
/ 04 июня 2019

Я пытаюсь создать модал многократного использования, который отображается высоко в DOM (прямой потомок <body>) и получает контент, передаваемый ему откуда угодно.

Мне нужно установить состояние модального типа с помощью события триггера (если я не пропускаю другую опцию). Redux - не вариант, так как в приложении его нет.

Моя проблема в том, что, когда я передаю компонент, содержащий содержимое, в событие триггера, он отображает только объект, но не HTML. Мне понятно, почему это так, но я не могу найти способ извлечь контент из этого объекта.

Мой модал: 

import React from "react"
import PropTypes from "prop-types"
import Rodal from 'rodal'

class ApplicationModal extends React.Component {
  state = {
    modalIsOpen: false,
    htmlContent: ""
  }

  componentDidMount() {
    $(window).on('modalToggle', (e, content) => {
      this.modalToggle(() => this.setModalContent(content))
    })
  }

  setModalContent = (content) => {
    this.setState({htmlContent: content})
  }

  modalToggle = (callback) => {
    this.setState({modalIsOpen: !this.state.modalIsOpen}, callback())
  }

  modalClose = () => {
    this.setState({modalIsOpen: false})
  }

  modalOpen = () => {
    this.setState({modalIsOpen: true})
  }

  render () {

    return (
      <React.Fragment>
        <Rodal visible={this.state.modalIsOpen} onClose={this.modalClose} closeOnEsc={true} className={this.props.rodalClasses}>
          <div id="modal-container">
            <div dangerouslySetInnerHTML={{__html: this.state.htmlContent}}></div>
          </div>
        </Rodal>
      </React.Fragment>
    );
  }
}

export default ApplicationModal

Моя страница: 

    import React from "react"
import PropTypes from "prop-types"

class MyPage extends React.Component {

  render () {
    // This works
    const html = `
    <div className="modal-content">
      <p>This is a question.</p>
      <p>This is an answer.</p>
    </div>
    `

    // This does not work
    const ModalContent = () => (
      <div className="modal-content">
        <p>This is a question.</p>
        <p>This is an answer.</p>
      </div>
    )

    return (
      <React.Fragment>
        <h1>My page</h1>

        {/* This works */}
        <a href='javascript:void(0)' onClick={() => $(window).trigger('modalToggle', html)}>Learn more</a>

        {/* This does not work */}
        <a href='javascript:void(0)' onClick={() => $(window).trigger('modalToggle', <ModalContent/>)}>Learn more</a>

      </React.Fragment>
    );
  }
}

export default MyPage

Я хотел бы иметь возможность передавать полные компоненты в событие триггера, чтобы содержимое можно было визуализировать с помощью кнопок и динамических входов.

Я совершенно не прав?

В случае, если это не очевидно, Родал - просто симпатичная модальная библиотека.

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Оказывается, dangerouslySetInnerHTML все испортил. Я предполагаю, что он пытался отобразить прямой HTML, а не компонент, который я передал как исполняемую функцию Что ... Имеет смысл сейчас, когда я думаю об этом ...

0 голосов
/ 04 июня 2019

То, что вы описываете, может быть выполнено с помощью Reactstrap (библиотека начальной загрузки, специфичная для React) и встроенного компонента Modal: 

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

const ApplicationModal = props => {
  const modalBody = (
    <div className="modal-content">
    <p>This is a question.</p>
    <p>This is an answer.</p>
    </div>
   );

return (
    <div>
    <Button color="danger" onClick={props.toggle}>
        {props.props.buttonLabel}
    </Button>
    <Modal
        isOpen={props.modal}
        toggle={props.toggle}
        className={props.className}
    >
        <ModalHeader toggle={props.toggle}>Modal title</ModalHeader>
        <ModalBody>{modalBody}</ModalBody>
        <ModalFooter>
        <Button color="primary" onClick={props.toggle}>
            Do Something
        </Button>{" "}
        <Button color="secondary" onClick={props.toggle}>
            Cancel
        </Button>
        </ModalFooter>
    </Modal>
    </div>
);
};

export default ApplicationModal;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...