初学者 - 危险的SetInnerHTML之后的回调函数答案

【问题标题】：初学者 - 危险的SetInnerHTML之后的回调函数
【发布时间】：2022-01-23 16:54:38
【问题描述】：

我刚刚开始学习 react，所以我想知道是否有办法做到这一点，或者即使它是正确的做法。

我的 App.js 中有一个名为 DeckTable 的组件

return (
    <>
      <DeckTable decksCompared={decksCompared} sideboardsCompared={sideboardsCompared} decks={decks} headerCompared={headerCompared} />
    </>
)

在 DeckTable.js 中，我将使用从 App.js 传递的那些值，并创建一个连接字符串的表，并使用危险的SetInnerHTML 将其返回，如下所示：

var html = '<table>...</table>'
return <div dangerouslySetInnerHTML={{ __html: html }} />

这是最好/正确的方法吗？如果我现在需要在屏幕上呈现表格后调用一个函数，我将在哪里/如何做到这一点？

如果你们需要更多信息，尽管问。

非常感谢。

【问题讨论】：

为什么要自己生成 HTML？为什么不实际上使用 React 为您制作表格？ React 允许你使用像 Array.map 这样的东西来渲染表格行。（几乎）没有充分的理由使用dangerouslySetInnerHTML - 因此属性的名称是dangerous。
我尝试过这样做，但无法成功。你能给我一个例子，我将如何接收数据，处理它并返回它，因为在示例中我看到数据被立即使用而不是处理。

标签： reactjs react-functional-component

【解决方案1】：

如果您希望 DeckTable 返回一个包含您在 App.js 上传递的道具（decksCompared、sideboardsCompared、decks 和 headerCompared）的表格，您可以只返回一个 div，其中包含使用这些道具的表格。您不需要使用 innerHTML。

【讨论】：

但是“decksCompared”是一个数组，我必须使用“for”来挂载表格，我不能直接将值使用到表格中，因为我不知道有多少元素它会有
您可以在 decksCompared 上使用 .map 在不知道大小的情况下迭代数组中的每个元素
是的！我终于弄清楚了该怎么做。这样就容易多了。只是另一个问题，如果它没有麻烦。如何在 que DeckTable 渲染后调用函数，例如 jQuery 组件，以允许拖放需要在屏幕上完全渲染表格的表格行？
如果你想要一个拖放表，你可以考虑使用像 react-dnd 或 react-beautiful-dnd 这样的拖放库
是的，我正在使用“可排序”库。我的疑问是，我应该在哪里调用一个影响在 DeckTable 组件中创建的表的函数，以确保该表已经存在于页面上并且上面有值？例如，如果我需要执行 $('table').sortable({...}); 之类的操作，我应该在哪里声明此代码？在 app.js 中？ index.js？在返回之前的decktable.js？这段代码应该在另一个函数里面吗？谢谢。

【解决方案2】：

初学者易于使用和理解

function setDangerousHtml(html, el) {
        if (el === null) return;
        const range = document.createRange();
        range.selectNodeContents(el);
        range.deleteContents();
        el.appendChild(range.createContextualFragment(html));
}

// Your function for any HTML in react


// Usage Very Simple

<div type='link' ref={setDangerousHtml.bind(null,'<YOUR HTML CODE>')}>
</div>

【讨论】：