Question

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

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

如何在状态为字符串数组且没有以纯文本形式出现的状态下使用JSX？

所讨论的行是这一行：allOptions.splice（index，0，this.props.levelNames [j]）;

道具应为：[...., '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是React在浏览器DOM中使用innerHTML的替代品。通常，通过代码设置HTML是有风险的，因为很容易在无意间使用户遭受跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须输入angerousedSetInnerHTML并使用__html键传递对象，以提醒自己这很危险。

如果您坚持将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>;
  }
}

在this.state中使用JSX，但它以纯文本形式呈现

1 个答案: