Question

我试图使用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;

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

Answer 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

希望这对您有所帮助。

一个组件中的React.js + Reactstrap多个模式

1 个答案: