如何在Reaction JS中将Html字符串呈现给组件

织梦狗教程前端问题

2022-01-01

How to render HTML string to component in React JS(如何在Reaction JS中将Html字符串呈现给组件)

本文介绍了如何在Reaction JS中将Html字符串呈现给组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个作为<div>Hello</div>字符串的HTML内容，我只想在Reaction组件中将其呈现为HTML，而不使用innerHTML方法和默认的反应，如DangerouslySetInnerHTML。请让我知道是否有任何完美的替代方案将有效地工作。我只是不想使用任何类似html-to-reaction的包。是否可以使用Reaction 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>
        )
    };
};

Sample Link

我需要将标记呈现为非字符串

推荐答案

您可以在Reaction中使用DangerouslySetInnerHTML。有关更多详细信息，请使用以下链接： 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>
        )
    };
};

这篇关于如何在Reaction JS中将Html字符串呈现给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react