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

2024-01-05

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

我的问题是,当在段落内添加值时,会将“”标记的开头和结尾解码为其解码值“”

有没有一种简单的方法可以使其工作而无需为此情况制作特定组件?

我的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."
],

默认情况下,React 转义 HTML 以防止 XSS 只需使用dangerouslySetInnerHTML, 看一眼官方文档 https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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