如何将组件导入 ReactHtmlParser

Posted 2023-02-22

【中文标题】如何将组件导入 ReactHtmlParser

【英文标题】：How to import component to ReactHtmlParser

【发布时间】：2021-03-18 12:07:30

【问题描述】：

我想了解如何使用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> 标签，我想创建现成的组件并导入

【参考方案1】：

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

<div><HtmlParse/> </div>

【讨论】：

是的，在 App.js 中我这样称呼

【参考方案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)
            </>
        );
    

【讨论】：

请注意这张图片ibb.co/xqWZ5wx对我来说它也适用于按钮只是返回[object Object]，我想改为返回按钮

更新了答案。 被转换为返回和对象的函数调用。不是字符串。不解析 react 组件，而是在解析后的 html 之前或之后添加。

我确实将其更新为上面的代码，应该可以工作。

是的，我看到了，但我遇到的问题是我想在任何地方应用按钮，例如在单词“Hello World”之后

那你需要使用html而不是JSX。 ReactHTMLParser 解析 html，而不是 jsx。再次更新。但是，在那里添加呼叫处理程序时您会遇到困难，现在您需要在没有反应的情况下聆听按钮点击。拥有多个模板会更容易，并使用 jsx 作为按钮