Использование JSX в this.state, но он отображается как простой текст

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

Чтобы отобразить теги HTML в React JSX, необходимо передать строку 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 для использования innerHTML в DOM браузера.В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).Таким образом, вы можете установить HTML непосредственно из React, но вы должны ввести опасно SetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это опасно.

Если вы настаиваете на вводе строки HTMLвместо этого внутри тега JSX передаются реквизиты; в качестве альтернативы вы можете использовать дополнительную библиотеку из этого пакета 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>;
  }
}