أفضل طريقة لإظهار مشروط في رد فعل

0

لقد بدأت للتو في ReactJS. لقد قرأت الكثير عن استخدام النوافذ المشروطة ولكني لست متأكدًا من الطريقة الصحيحة. أنا أستخدم حاليا عن طريق الاسترجاعات.

مكون حوار مشروط Reaststrap:

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 أو أي مكونات إضافية مثل modals-modals؟

2 الاجابة

0

الطريقة التي كتبت بها الرمز صحيحة. ولكنك لست بحاجة إلى طريقة Modalclose داخل ModalComponent. يمكنك تمرير الأسلوب كخاصية من المكون الرئيسي أيضًا. تحقق من الرمز أدناه.

المكون الرئيسي للتطبيق:

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;

مكون حوار مشروط Reaststrap:

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;
:مؤلف
0

في الواقع ، نعم أنت على صواب. أفضل طريقة هي استخدام الحالة للتحكم في الوسائط. أيضًا ، يتم إنشاء وحدات التفاعل بحيث يمكنك إعادة استخدام كود الآخرين وليس كتابة التعليمات البرمجية بنفسك. بصفتك مطورًا ، من الشائع قضاء المزيد من الوقت في معرفة ما يفعله الرمز بدلاً من كتابة الرمز فعليًا. إذا كنت تريد مشروطًا أكثر بساطة ، يمكنك تجربة ذلك

:مؤلف
فوق
قائمة طعام