可重用的模态组件 React Typescript答案

【问题标题】：Reusable Modal Component React Typescript可重用的模态组件 React Typescript
【发布时间】：2020-10-13 17:15:15
【问题描述】：

我有一个组件，里面有一个按钮，就像这样 -

<Button variant="primary" disabled={checkAccepted} onClick={openModal}>Send</Button>

我希望这个按钮在它处于活动状态时能够在单击时打开一个模式。我不确定如何做到这一点，并且一直在摆弄道具，但似乎无法弄清楚。我还希望模态可重用，以便可以在模态体中传递任何内容。我在想如何从我的 openModal 函数中打开模态？我试着像这样退回它 -

const openModal = () => {

return (
            <Modal>
                <ModalBody>*Pass in swappable content here*</ModalBody>
            </Modal>
        )
}

但这似乎不起作用。我确定我错过了什么。

【问题讨论】：

标签： reactjs typescript bootstrap-4 bootstrap-modal reactstrap

【解决方案1】：

您应该将触发模态的函数作为道具传递给您的<Button /> 组件。然后，在您的组件中，您要添加 onClick 事件。您不能将 onClick 事件设置为 <Button />。它会将 onClick 视为传递给<Button /> 的道具。在 <Button /> 中，您可以将 onClick 事件设置为实际的 <button> 元素，并使用作为该事件的道具传入的函数。

您可以使用状态来跟踪单击模式按钮的时间。你的函数可能看起来像：（我在这里使用基于类的组件，但你可以对函数组件做同样的事情）

buttonClickedHandler = () => {
    this.setState({isModalButtonClicked: !this.state.isModalButtonClicked});
}

然后，就可以设置Modal组件了，

<Modal isShow={this.state.isModalButtonClicked} modalButton={this.buttonClickedHandler}>
   <div> ...set contents of modal</div>
</Modal>

<button onClick={this.buttonClickedHandler}>Show Modal</button>

所以，在 Modal 组件中，你可以有这样的东西：

<React.Fragment>
    <Backdrop showModal={this.props.isShow} clicked={this.props.modalButton}/>
    {this.props.children}
</React.Fragment>

背景基本上是灰色的背景。您还可以设置一个 onClick 事件，以便在单击背景时进行监听。

【讨论】：

【解决方案2】：

您不能从事件处理程序返回组件。在反应中处理事件的方法几乎总是改变触发重新渲染的应用程序的状态。在您的情况下，您需要跟踪模态的 open 状态。

这可以通过受控方式（您自己跟踪打开状态并将其作为道具传递给<Modal> 组件）或以不受控制的方式完成（<Modal> 组件管理open状态本身）。第二种方法要求您提供例如要呈现给您的 Modal 组件的元素，充当触发器：

const MyModal = ({ children, trigger }) => {
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);

  return (
    <div>
      {React.cloneElement(trigger, { onClick: toggle })}
      <Modal isOpen={modal} toggle={toggle}>
        <ModalBody>{children}</ModalBody>
      </Modal>
    </div>
  );
};

那么你可以这样使用它：

<MyModal trigger={<Button variant="primary">Send</Button>}>
    <p>This is the content.</p>
</MyModal>

或者您可以以可控的方式实现它。这更灵活，因为它允许您在任何地方渲染触发元素：

const MyModal = ({ children, isOpen, toggle }) => (
  <div>
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalBody>{children}</ModalBody>
    </Modal>
  </div>
);

用法示例：

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div className="App">
      <Button variant="primary" onClick={toggle}>
        Send
      </Button>
      <MyModal isOpen={isOpen} toggle={toggle}>
        <p>This is the content.</p>
      </MyModal>
    </div>
  );
}

【讨论】：