Передать массив строк в компонент React со строкой из файла json и разрешить встроенные теги span - PullRequest
Новая
       20

Передать массив строк в компонент React со строкой из файла json и разрешить встроенные теги span

0 голосов
/ 24 мая 2019

Я пытаюсь получить массив строк для отображения в виде абзацев и разрешить встроенный тег span внутри этих строк.

Моя проблема возникает, когда значение добавляется внутри абзаца, декодирует начало тега "<" и ">" и заканчивается их декодированными значениями "<" и ">"

Есть ли простой способ заставить это работать без создания конкретного компонента для этого случая?

Мой компонент React выглядит следующим образом 

const Paragraphs = ({ data, languageText }) => {
    if (data) {
        const texts = languageText[data.languageKey];

        return (
            <section>
                {texts && texts.map(text => <p>{text}</p>)}
            </section>
        );
    } else {
        console.warn(`webpage::element: 'PARAGRAPHS' lack content`);
    }
}
export default Paragraphs;

это массив, который передается текстам 

[
"When a Relic is found or assembled from Relic Fragments, a payout is rewarded, based on its rarity. <span style=\"font-weight: bold\">The rarer the item, the higher the payout!</span>",
"In addition to Relics, Gold Coins can also be found."
],

1 Ответ

2 голосов
/ 24 мая 2019

По умолчанию React экранирует HTML, чтобы XSS просто не использовал dangerouslySetInnerHTML, взгляните на официальные документы

...