javascript 编辑一个从后端获取的html并将其呈现在一个react网站

7tofc5zh  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(110)
let htmlFromBackend = `Some backend HTML in table format`

return (
  <div dangerouslySetInnerHTML={{ __html: htmlFromBackend}}></div>
)

我想添加一些按钮(我想在每个<tr></tr>中添加一个按钮)和从后端获取的html中的元素。如何实现?

mzsu5hc0

mzsu5hc01#

对于最简单的解决方案,您可以直接在HTML前面添加。例如:

return (
  <div dangerouslySetInnerHTML={{ __html: `<button onclick="alert('Nice!')">Alert</button>${htmlFromBackend}`}}></div>
)

要在HTML的多个元素上添加按钮,可以使用RegExp或先解析它,我将展示一个先解析HTML然后编辑它的示例。

function preprocessHTML(html){
    const element=document.createElement('div');
    element.innerHTML=html;

    // do any operations you like, for example:
    for(const child of element.children){
        const btn=document.createElement('button');
        btn.innerText='Click Me!';
        child.prepend(btn);    
    }

    return element.innerHTML;
}

return (
  <div dangerouslySetInnerHTML={{ __html: preprocessHTML(htmlFromBackend)}}></div>
)

如果您希望预先添加React,可以使用ReactDOM.createPortal将任何JSX元素呈现到任何HTMLDom。

相关问题