在 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 。 但僅適用於鈎子