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

Question

我正在尝试获取一个字符串数组以显示为段落，并允许在这些字符串中使用内联跨度标记。

我的问题是，当在段落内添加值时，解码“<”和“>”标记开始和结束到它们的解码值“<”和“>”

有没有一种简单的方法可以在不为这种情况制作特定组件的情况下使它正常工作？

我的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，看看oficial docs

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

Pass array of strings to React component with string coming from json file and allow inline span tags

javascript

html

reactjs

preact