Question

我正在从reactstrap库渲染模态，并且我想在此文本模态中包含另一个链接标记。诸如“单击此处显示”之类的内容。因此，当出现模态时，用户可以看到该文本，也可以单击此处的单词来呈现另一个不同的模态。如何实现呢？这是我的代码：

我在调用模态的代码

<Modal
  show={showGeneralModal}
  children={"Click " + <a href="#"> here </a> + " to show it"}
  title={modalTitle}
  size={modalSize}
  onExit={this.toggleNormalModal}
/>

原始导出模态中的代码

    return (
      <div>
        <Modal
          isOpen={isOpen}
          backdrop="static"
          keyboard={false}
          toggle={this.toggle}
          size={size}
          onExit={onExit}
        >
          <ModalHeader className={modalHeaderClasses} toggle={this.toggle}>
            {title}
          </ModalHeader>
          <ModalBody className={modalBodyClasses}>
            {children}
          </ModalBody>
        </Modal>
      </div>
    );

我现在正在模态中获取此文本：

Click [object Object] to show it

我想代替

Click here to show it

当我单击here字时，应渲染另一个模态。

有什么建议吗？

我无法修改原始的Modal代码，因为它已在不同地方用于许多其他组件。

Answer 1

顺便说一句，我这样做是错误的。如果您遇到同样的麻烦，您可能会知道children已经是一种反应的支柱，它使您可以访问在要访问的组件中传递的任何内容。

知道，您不必传递children prop，而只需在组件内传递任何您想放在子prop中的东西。因此，不要这样做：

<Modal
  show={showGeneralModal}
  children={"Click " + <a href="#"> here </a> + " to show it"}
  title={modalTitle}
  size={modalSize}
  onExit={this.toggleNormalModal}
/>

执行此操作：

<Modal
  show={showGeneralModal}
  title={modalTitle}
  size={modalSize}
  onExit={this.toggleNormalModal}
> Click <a href="#"> here </a> to show it
</Modal>

来自Reactstrap库的Modal中的渲染链接

1 个答案: