初学者 - dangerouslySetInnerHTML 后的回调函数

Question

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

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

的组件

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

在 DeckTable.js 中，我将使用从 App.js 传递的那些值，并使用 dangerouslySetInnerHTML 创建一个 table 连接字符串和 return 它，如下所示：

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

这是best/correct的做法吗？如果 table 在屏幕上呈现后我现在需要调用一个函数 where/how 我会这样做吗？

如果你们需要更多信息，请询问。

非常感谢。

Answer 1

初学者简单易懂

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>

Answer 2

如果你想让 DeckTable return 一个 table 和你传递给 App.js 的道具（decksCompared、sideboardsCompared、decks 和 headerCompared），你可以 return一个 div 和一个 table 在里面使用这些道具。您不需要使用 innerHTML。

初学者 - dangerouslySetInnerHTML 后的回调函数

Beginner - Callback function after dangerouslySetInnerHTML

reactjs

react-functional-component