React.js + Reactstrap 多个模态在一个组件中

Posted 2023-03-23

【中文标题】React.js + Reactstrap 多个模态在一个组件中

【英文标题】：React.js + Reactstrap multiple modals in one component

【发布时间】：2019-04-27 15:46:58

【问题描述】：

我正在尝试使用 reactstrap 在我的页脚组件中显示 2 个不同的模式 onClick。

我设法构建了一个基于类的页脚，它根据状态和外部模式元素切换模式可见性，以在单击每个“链接”时显示模式。

但我仍在尝试找出一种方法，在每个链接的同一模式上显示不同的内容（标题和模式正文）。

//FOOTER

import React,  Component  from 'react';

import MainModal from '../../elements/modal';


class Footer extends Component

  state = 
    modal: false
  

  toggle = () => 
    this.setState(
        modal: !this.state.modal
    )
  

  render()
    return(
      <footer className="container-fluid footer">
          <div className="modals sm-text-center">
              <span className="sm-block"><span className="fLink" onClick=this.toggle>Terms of use</span> | <span className="fLink" onClick=this.toggle>Privacy Policy</span></span>
            <div className="clearfix"/>
          </div>
          <MainModal type="basic" toggle=this.toggle modal=this.state.modal/>
      </footer>
    )
  

export default Footer;




//MODAL TEMPLATE

import React,  Component  from 'react';
import  Modal, ModalHeader, ModalBody  from 'reactstrap';


    class MainModal extends Component 

        render()
            return(
                <Modal isOpen=this.props.modal toggle=this.props.toggle>
                    <ModalHeader toggle=this.props.toggle>Modal title</ModalHeader>
                    <ModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </ModalBody>
                </Modal>
            );
        
    ;

export default MainModal;

根据使用条款和隐私政策显示内容的最佳/优雅方式是什么？

【参考方案1】：

将“标题”和正文内容“传递给 toggle() 方法，然后传递给 <MainModal />

模态：

<Modal isOpen=this.props.isModalOpen toggle=this.props.toggle>
    <ModalHeader toggle=this.props.toggle>
      this.props.modalTitle
    </ModalHeader>
    <ModalBody>this.props.modalBody</ModalBody>
</Modal>

页脚：

<span
  className="fLink"
  onClick=e =>
     this.toggle("Terms of Use", "Body for Terms of User")
  
>
  Terms of use
</span>

<span
 className="fLink"
 onClick=e =>
    this.toggle("Privacy Policy", "Body for Privacy Policy")
 
>
  Privacy Policy
</span>

状态：

state = 
 isModalOpen: false,
 modalTitle: "",
 modalBody: ""
;

切换方法：

toggle = (title, body) => 
 this.setState(
   isModalOpen: !this.state.modal,
   modalTitle: title,
   modalBody: body
 );
;

这里有一个完整的解决方案：https://codesandbox.io/s/63jqmvzvn

希望对你有所帮助。