如何将组件导入 ReactHtmlParser

Question

我想了解如何使用ReactHtmlParser的react组件，它返回[object Object]

const button = <Button variant="contained">Default</Button>
const color = `red`
const HTML = `<p style="color: ${color}"> Hello World, my name is Jacob! ${button} </p>`


export class HtmlParse extends React.Component {
    render() {
        return(
            <>
                {ReactHtmlParser(HTML)}
            </>
        );
    }
}

我不想每次都在 HTML 变量中创建<button> String </button>、const HTML = <button> String </button> 标签，我想创建现成的组件并导入

Answer 1

看起来确实不错。如果你这样做，它会渲染吗？

<div><HtmlParse/> </div>

Answer 2

您正在将 JSX 添加到已解析的 HTMl 中。尝试从 HTML 中删除按钮并将其添加到 JSX。 常量按钮 = “默认” 常量颜色 = red 常量 HTML = <p style="color: ${color}"> Hello World, my name is Jacob! ${button}</p>

export class HtmlParse extends React.Component {
    render() {
        return(
            <>
                {ReactHtmlParser(HTML)}
            </>
        );
    }
}