使用来自json文件的字符串将字符串数组传递给React组件，并允许内联span标签

Question

我正在尝试获取一个字符串数组以显示为段落，并允许在这些字符串中使用内联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."
],

Answer 1

默认情况下，React会转义HTML以防止XSS只使用dangerouslySetInnerHTML使用SetInnerHTML ，请看官方文档