Javascript React.js+；在一个组件中使用多个模态

我试图使用reactstrap在我的页脚组件中显示两个不同的模态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;

//页脚
从“React”导入React，{Component}；
从“../../elements/modal”导入MainModal；
类页脚扩展组件{
状态={
模态：假
}
切换=（）=>{
这是我的国家({
模态：！this.state.modal
})
}
render（）{
返回(
使用条款|隐私政策
)
}
}
导出默认页脚；
//模态模板
从“React”导入React，{Component}；
从“reactstrap”导入{Modal，ModalHeader，ModalBody}；
类MainModal扩展组件{
render（）{
返回(
情态标题
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德有时，如果你不自以为是，就必须为自己的行为负责。
);
}
};
导出默认主模式；

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

将“标题”和“正文内容”传递到toggle（）方法，然后传递到

模态：

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

切换方法：

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

以下是一个完整的解决方案：

希望这对你有帮助

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

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