在 React 中显示模态的最佳方式

Question

我刚刚开始使用 ReactJS。 我已经阅读了很多关于模态窗口的使用，但我不确定哪种方法是最正确的。 我目前正在通过回调使用。

Reactstrap 模态对话框组件：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { RouteProps } from 'react-router';

interface IModalProps extends RouteProps {
  title: string;
  content: string;
  isOpen: boolean;
  onClose: any;
}

class SimpleModal extends React.Component<IModalProps, any> {

  constructor(props) {
    super(props);

    this.closeDialog = this.closeDialog.bind(this);
  }

  public closeDialog() {
    this.props.onClose();
  }

  public render() {
    const { title, content, isOpen } = this.props;

    return ReactDOM.createPortal(
      <React.Fragment>
        <Modal isOpen={isOpen}>
          <ModalHeader>{title}</ModalHeader>
          <ModalBody>
            {content}
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.closeDialog}>Aceptar</Button>
          </ModalFooter>
        </Modal>
      </React.Fragment>,
      document.getElementById('root') as HTMLElement
    );
  }
}

export default SimpleModal;

应用程序主要组件：

import * as React from 'react';
import { Button, FormGroup } from 'reactstrap';
import SimpleModal from '../../shared/components/modals/simple-modal';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      messageTitle: '',
      messageContent: '',
      showModal: false
    };

    this.handleHelloWorldModal = this.handleHelloWorldModal.bind(this);
    this.handleStackoverflowModal = this.handleStackoverflowModal.bind(this);
    this.handleModalClose = this.handleModalClose.bind(this);
  }

  public handleHelloWorldModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'Hello World',
      showModal: true
    });
  }

  public handleStackoverflowModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'StackOverFlow',
      showModal: true
    });
  }

  public handleModalClose() {
    this.setState({ showModal: false });
  }

  public render() {
    const { showModal, messageTitle, messageContent } = this.state;

    const modalProps = {
      title: messageTitle,
      content: messageContent,
      isOpen: showModal,
      onClose: this.handleModalClose
    }

    return (
      <div>
        <FormGroup>
          <Button color="warning" onClick={this.handleHelloWorldModal}>Show HelloWorld Modal</Button>
        </FormGroup>

        <FormGroup>
          <Button color="danger" onClick={this.handleStackoverflowModal}>Show StackOverFlow Modal</Button>
        </FormGroup>

        <SimpleModal {...modalProps} />
      </div>
    );
  }
}

export default App;

那么，在反应中使用模态是正确的方法吗？ 任何不使用 redux 或任何插件（如 react-modals）的替代方法？

Answer 1

你写代码的方式是正确的。 但是您不需要在 ModalComponent 中使用 Modalclose 方法。 您也可以将方法作为主组件的属性传递。 检查下面的代码。

应用程序主要组件：

import * as React from 'react';
import { Button, FormGroup } from 'reactstrap';
import SimpleModal from '../../shared/components/modals/simple-modal';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      messageTitle: '',
      messageContent: '',
      showModal: false
    };

    this.handleHelloWorldModal = this.handleHelloWorldModal.bind(this);
    this.handleStackoverflowModal = this.handleStackoverflowModal.bind(this);
  }

  handleHelloWorldModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'Hello World'
    });
  }

  handleStackoverflowModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'StackOverFlow'
    });
  }

  openModal () {
      this.setState({showModal: true});
  }

  public render() {
    const { showModal, messageTitle, messageContent } = this.state;

    const modalProps = {
      title: messageTitle,
      content: messageContent,
      isOpen: showModal
    }

    return (
      <div>
        <FormGroup>
          <Button color="warning" onClick={this.handleHelloWorldModal}>Show 
          HelloWorld Modal</Button>
        </FormGroup>

        <FormGroup>
          <Button color="danger" onClick={this.handleStackoverflowModal}>Show StackOverFlow Modal</Button>
        </FormGroup>

        <SimpleModal onClick={() => this.openModal()} {...modalProps} 
         modalClose={() => this.setState({ showModal: false })} 
        />
      </div>
    );
  }
}

export default App;

Reactstrap 模态对话框组件：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { RouteProps } from 'react-router';

interface IModalProps extends RouteProps {
  title: string;
  content: string;
  isOpen: boolean;
  onClose: any;
}

class SimpleModal extends React.Component<IModalProps, any> {

  constructor(props) {
    super(props);
  }
  public render() {
    const { title, content, isOpen } = this.props;

    return ReactDOM.createPortal(
      <React.Fragment>
        <Modal isOpen={isOpen}>
          <ModalHeader>{title}</ModalHeader>
          <ModalBody>
            {content}
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.props.modalClose}>Aceptar</Button>
          </ModalFooter>
        </Modal>
      </React.Fragment>,
      document.getElementById('root') as HTMLElement
    );
  }
}

export default SimpleModal;

Answer 2

事实上，是的，你是对的。 使用状态来控制模态是最好的方法。 此外，还创建了反应模块，以便您可以重用其他人的代码，而不是自己编写代码。 作为开发人员，通常会花更多时间弄清楚代码的作用而不是实际编写代码。 如果你想要一个更简单的模态，你可以试试这个

Answer 3

试试这个react-modal-controller 。 但仅适用于钩子