javascript - 在 this.state 中使用 JSX 但它被呈现为纯文本

Question

我正在动态渲染一个元素列表。根据这些元素中的键值对，我需要在它们前面插入其他元素。

我想使用 <sup></sup>这些元素上的标签，但它们显示为纯文本而不是上标。

如何在字符串数组状态下使用 JSX 而不是以纯文本形式输出？

有问题的那一行是:allOptions.splice(index, 0, this.props.levelNames[j]);

Prop 将是:[...., '1<sup>st</sup> Level',...]

但在渲染时它只是以纯文本形式出现。

import React, { Component } from 'react';
import './App.css';

export class Chosen extends Component {
    render() {
        let allOptions = this.props.chosenSpells.map((val, i) => this.props.selectMaker(val, i, 'chosen'));


        let index;
        let headings=this.props.levelNames;

        for (let j=this.props.highestSpellLevel; j>0;j--) {
            index = this.props.chosenSpells.findIndex(function findLevel (element) {return element.level==j});
            console.log(index);
            console.log(headings[j]);
            if (index>=0){
                allOptions.splice(index, 0, this.props.levelNames[j]);
            }
        }

        return (
            <div>               
                <b><span className="choose">Chosen (click to remove):</span></b><br/>
                <div className="my-custom-select">
                    {allOptions}
                </div>              
            </div>
        );
    }
}


export class Parent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            levelNames: ['Cantrips', '1<sup>st</sup> Level', '2nd Level', '3rd Level']
        };

Answer 1

为了在 React JSX 中显示 HTML 标签，您需要将 HTML 字符串传递给 dangerouslySetInnerHTML 属性。不在 JSX 标签内。请查看此官方文档以了解如何操作:https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

所以，而不是这样做:

<div className="my-custom-select">
    {allOptions}
</div> 

你应该这样做:

<div className="my-custom-select" dangerouslySetInnerHTML={{__html: allOptions}}/> 

这是出于安全考虑。引用自 React 文档:

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

如果您坚持将 HTML 字符串放在 JSX 标签内而不是传递给 props，或者您可以使用此 NPM 包中的附加库:https://www.npmjs.com/package/react-html-parser .所以，它看起来像这样:

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    ........
    return <div className="my-custom-select">{ ReactHtmlParser(allOptions) }</div>;
  }
}