Как отобразить HTML-строку для компонента в React JS

Question

У меня есть содержимое HTML в виде строки, например, <div>Hello</div>, и я просто хочу отобразить как HTML в компоненте реагирования, не используя метод innerHTML, и по умолчанию реагирует как опасно SetInnerHTML.Дайте мне знать, есть ли идеальная альтернатива, которая будет работать эффективно.Я просто не хочу использовать пакет, как HTML-реагировать и все.Можно достичь любым другим методом по умолчанию в React Render?

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState :`<div>Hello</div>` }); 
    }
    render() {
        return (
            <div id="container">{this.state.currentState}</div>
        )
    };
};

Пример ссылки

Мне нужно отображать теги не как строки

Answer 1

Вы можете опасно использовать SetInnerHTML в реакции. Для более подробной информации вы можете использовать ссылку ниже: https://reactjs.org/docs/dom-elements.html

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState: <div>Hello</div> }); 
    }

    this.createMarkup() {
      return {__html: this.state.currentState};
    }

    render() {
        return (
            <div id="container" dangerouslySetInnerHTML={createMarkup()}></div>
        )
    };
};

Answer 2

Просто сохраните его как элемент вместо строки:

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState: <div>Hello</div> }); 
    }
    render() {
        return (
            <div id="container">{this.state.currentState}</div>
        )
    };
};