Question

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

Restrap模态对话框组件：

SELECT oan.[Order], [Name]
FROM [StackOverflow].[dbo].[OrderAndName] oan
    INNER JOIN (SELECT [Order]
                FROM (SELECT [Order],
                        RANK() OVER(PARTITION BY [Order] ORDER BY Name) AS NameRank
                      FROM [StackOverflow].[dbo].[OrderAndName]) ranked
                WHERE ranked.NameRank > 1
                GROUP BY [Order]) twoOrMore ON oan.[Order] = twoOrMore.[Order]

应用程序主要组件：

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;

那么，在react中使用模态是正确的方法吗？ 是否有不使用redux或其他插件（如react-modals）的替代方法？

Answer 1

实际上，是的，您是正确的。使用状态来控制模态是最好的方法。此外，还创建了react模块，以便您可以重用其他人的代码，而不必自己编写代码。作为开发人员，通常花更多的时间弄清楚代码的作用，而不是实际编写代码。如果您想使用更简单的模态，可以尝试this

Answer 2

您编写代码的方式是正确的。但您不需要在ModalComponent内部使用Modalclose方法。您还可以通过Main Component将方法作为属性传递。检查下面的代码。

应用程序主要组件：

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 3

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

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

3 个答案: