来自 reactstrap 库的 Modal 中的渲染链接答案

【问题标题】：Rendering link within a Modal from reactstrap library来自 reactstrap 库的 Modal 中的渲染链接
【发布时间】：2019-09-03 14:48:00
【问题描述】：

我正在从 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 代码，因为它被用于不同地方的许多其他组件。

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

顺便说一句，我这样做是错误的。如果您遇到同样的麻烦，您可能知道 children 已经是 react 的一个属性，它允许您访问在您正在访问的组件中传递的任何内容。

知道了，您不必传递 children 道具，只需在组件内传递您想要在 children 道具中的任何内容。所以，不要这样做：

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

【讨论】：