从反应堆库中渲染Modal中的链接

Question

我正在使用reactstrap库渲染一个模态，我希望在这个文本模式中有另一个链接标记。像“点击这里显示它”之类的东西。因此，当模态出现时，用户可以看到该文本，也可以单击此处的单词以呈现另一个不同的模态。怎么能实现呢？这是我的代码：

我称之为模态的代码

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

来自原始导出的Modal的代码

    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。

有什么建议？

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

Answer 1

顺便说一下，我做错了。如果您遇到同样的问题，您可能知道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>