一个组件中的React.js + Reactstrap多个模式 [英] React.js + Reactstrap multiple modals in one component

问题描述

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

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

但是我仍在尝试寻找一种方法，以在每个链接的相同模式上显示不同的内容(标题和模式主体).

 //FOOTER从'react'导入React，{组件};从'../../elements/modal'导入MainModal;Footer类扩展Component {状态= {模态:假}toggle =()=>{this.setState({情态:！this.state.modal})}使成为(){返回(< footer className =容器-流体页脚">< div className ="modals sm-text-center">< span className ="sm-block">< span className ="fLink" onClick = {this.toggle}>使用条款</span>|< span className ="fLink" onClick = {this.toggle}>隐私权政策</span></span>< div className ="clearfix"/></div>< MainModal type ="basic" toggle = {this.toggle} modal = {this.state.modal}/></footer>)}}导出默认页脚；//模版模板从'react'导入React，{组件};从'reactstrap'导入{Modal，ModalHeader，ModalBody};MainModal类扩展了Component {使成为(){返回(< Modular isOpen = {this.props.modal} toggle = {this.props.toggle}>< ModalHeader toggle = {this.props.toggle}>模态标题</ModalHeader>< ModalBody>Lorem ipsum dolor坐下，私立教育专家，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.不擅长于圣人的神职人员，必须在有罪不罚的情况下动手动手做动手.</ModalBody></Modal>);}};导出默认的MainModal; 

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

解决方案

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

模式:

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

脚:

 < spanclassName ="fLink"onClick = {e =>this.toggle(使用条款"，用户条款正文")}>使用条款</span>< spanclassName ="fLink"onClick = {e =>this.toggle(隐私权政策"，隐私政策的主体")}>隐私政策</span> 

状态:

  state = {isModalOpen:否，modalTitle:"，modalBody:"}; 

切换方法:

  toggle =(标题，正文)=>{this.setState({isModalOpen:！this.state.modal，modalTitle:标题，modalBody:身体});}; 

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

希望这对您有所帮助.

I'm trying to use reactstrap to display 2 differents modals onClick in my footer component.

I managed to build a class based footer who toggle the modal visibility based on the state and an external modal element to display the modal when clicking on each 'link'.

But i'm still trying to figure out a way to display a different content (title and modal body) on the same modal for each link.

//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;

What would be the best/elegant way to display the content content for the Terms of use and the privacy policy?

解决方案

Pass "title" and body content" to toggle() method and then to <MainModal />

Modal:

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

Footer:

<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:

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

Toggle method:

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

Here is a complete solution: https://codesandbox.io/s/63jqmvzvn

Hope this helps you.

这篇关于一个组件中的React.js + Reactstrap多个模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！