反应传递链接到可重用组件

Question

我在 React 中使用了一个可重用的组件，其中传递的主要是文本和一些道具。 其中一个文本需要有一个链接词，但我不知道如何在字符串中传递该链接。知道如何传递包含链接的字符串吗？ 谢谢！

这就是我将文本和道具传递给可重复使用的 VertragsCheckSlide 组件的方式。 我的问题涉及道具“parag1”，我需要在其中添加带有信息图标的链接。 我尝试通过它通常是有效的，但我得到一个 [Object, Object] 作为 output。

                        <VertragsCheckSlide
                                title="Ist meine Rentenversicherung zu teuer?"
                                parag1={`Die Kosten von privaten Rentenversicherungen sind sehr 
                                intransparent und höchst unterschiedlich. Mit der gesetzlich 
                                vorgeschriebenen Effektivkostenquote ${(
                                    <TipIcon
                                        size="lg"
                                        tooltipText={ToolTips[0]}
                                    />
                                )} kann man sie aber gut vergleichen.`}
                                parag2="Bei klassischen Anbietern (zumeist Versicherungen) liegt die 
                                Effektivkostenquote oft bei 2 % oder sogar höher. Bei myPension 
                                beträgt sie nur ca. 0,8 %."
                                parag3="Hohe Kosten mindern den Ertrag und damit dein zukünftiges 
                                Guthaben zur Verrentung. Wie viel das ausmachen kann, zeigt dir die 
                                nebenstehende Grafik."
                                buttonText="Weitermachen"
                                graphicImage={graphicImage4}
                                dropDown
                                renderSelect={this.renderSelect}
                                dropTitle="Wo finde ich die Effektivkostenquote in meinem bestehenden 
                                Vertrag?"
                                dropText="Jeder Anbieter einer privaten Rentenversicherung ist 
                                verpflichtet, die Effektivkosten anzugeben. Man findet sie im 
                                sogenannten Produktinformationsblatt. Suche einfach nach den 
                                Begriffen „Informationsblatt“, „Effektivkosten“ oder „Kosten“ und 
                                schon hast du deine Kosten im Blick. Probiere auch unseren 
                                Nettovergleichsrechner aus!
                                Hilfe nötig? Du kannst uns anrufen oder uns gleich deinen Vertrag per 
                                E-Mail senden. Wir melden uns schnellstmöglich bei dir."
                                handleClick={this.next}
                                activeSlide={activeSlide}
                            />

谢谢您的帮助！

Answer 1

您可以尝试传递像 html object 这样的字符串：

<div>
   <div> your text in here </div>
   <a href={your link} />
</div>

并且在组件渲染文本中可以使用：

 <span>
  dangerouslySetInnerHTML={{ __html: content transmisson in }}
  </span>

这就是如何在 html 中渲染纸的方式

Answer 2

它完美地通过了这样的道具：

                               <VertragsCheckSlide
                                 parag1={<div>
                                        Die Kosten von privaten
                                        Rentenversicherungen sind sehr
                                        intransparent und höchst
                                        unterschiedlich. Mit der gesetzlich
                                        vorgeschriebenen Effektivkostenquote
                                        <TipIcon
                                            size="lg"
                                            tooltipText={ToolTips[0]}

                                        />
                                        kann man sie aber gut vergleichen.
                                        </div> 
                                        } />

无需在 Render 上设置任何危险的 SetInnerHTML。

感谢您的提示！