Реагировать на передачу ссылки на повторно используемый компонент - PullRequest
Новая
       2

Реагировать на передачу ссылки на повторно используемый компонент

0 голосов
/ 26 мая 2020

Я использую многоразовый компонент в React, которому передается в основном текст и некоторые реквизиты. В одном из текстов должно быть связанное слово, но я не знаю, как передать эту ссылку внутри строки. Есть идеи, как передать строку со ссылками в ней? Спасибо!

Вот как я передаю текст и реквизиты моему многоразовому компоненту VertragsCheckSlide. Мой вопрос относится к опоре "parag1", там мне нужно добавить ссылку с помощью значка информации. Я пробовал передать его, обычно он работает, но на выходе получаю [Object, Object]. 

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

Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 26 мая 2020

вы можете попробовать передать строку, например объект html: 

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

, а в тексте рендеринга компонента можно использовать: 

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

, то есть таким образом, как рендерить документ в html

0 голосов
/ 27 мая 2020

Он отлично работал при передаче пропа следующим образом: 

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

Нет необходимости отключать установку опасногоSetInner HTML на Render.

Спасибо за подсказки!

...