时间戳

首页 > 解决方案 > 来自 reactstrap 库的 Modal 中的渲染链接

reactjs - 来自 reactstrap 库的 Modal 中的渲染链接

问题描述

我正在从 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单词时，应该呈现另一个模态。

有什么建议么？

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

标签： reactjsreactstrap

解决方案

顺便说一句，我这样做是错误的。如果您遇到同样的麻烦，您可能知道这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>

推荐阅读