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

Question

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?

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;

this is the array that is passed to texts

[
"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 ，请看官方文档