Question

我正在将内容HTML用作字符串，例如<div>Hello</div>，而我只想在react组件中呈现为HTML，而无需使用innerHTML方法，并且默认的响应就像危险地设置为InnerHTML。让我知道是否有任何有效的完美替代方案。我只是不想使用html-to-react之类的软件包。是否可以在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>
        )
    };
};

Sample Link

我需要将标签呈现为非字符串形式

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>
        )
    };
};

如何在React JS中将HTML字符串呈现为组件

2 个答案: