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

问题描述

限时删除！！

我试图获取一个字符串数组以显示为段落，并允许在这些字符串中插入行内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组件，并允许使用内联跨度标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..