时间戳

首页 > 解决方案 > 从传递给触发事件的无状态 React 组件中提取 HTML

javascript - 从传递给触发事件的无状态 React 组件中提取 HTML

问题描述

我正在尝试创建一个可重用的模式，该模式在 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

我希望能够将完整的组件传递到触发事件中，以便可以使用按钮和动态输入呈现内容。

我会完全错了吗？

如果不是很明显，Rodal 只是一个漂亮的模态库。

标签： javascriptreactjsdomeventscomponents

解决方案

您所描述的可以通过 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;

推荐阅读