使用来自json文件的字符串将字符串数组传递给React组件，并允许使用内联跨度标签 [英] Pass array of strings to React component with string coming from json file and allow inline span tags

问题描述

我试图获取一个字符串数组以显示为段落，并允许在这些字符串中插入行内span标签.

I'm trying to get an array of strings to display as paragraphs and allow an inline span tag inside of these strings.

我的问题是，当将值添加到段落内时，将对<"进行解码和>"标签开始并结束于它们的解码值<"；和>"

My issue comes is when the value is added inside the paragraph the decodes the "<" and ">" tag start and ends to their decoded values "<" and ">"

是否有一种简单的方法可以使此工作正常进行，而无需为此案例创建特定的组件?

Is there an easy way to get this working without making a specific component for this case?

我的React组件如下

My React component is as follows

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 ，请查看

By default, React escapes HTML to prevent XSS just use dangerouslySetInnerHTML, take a look at oficial docs

这篇关于使用来自json文件的字符串将字符串数组传递给React组件，并允许使用内联跨度标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！