如何在不使用第三方庫的情況下將 html 字符串轉換為反應元素？

Question

您好，這是我第一次向 stackoverflow 發布問題，因此請隨時詢問您是否需要更多信息。

我目前正在從事 React/Typescript 項目。

所以我有一個字符串，我只希望將特定的 substring 包裝在 span 元素中，因為我將應用斜體字體樣式（出於某種原因，或者不起作用）。 然后將其轉換為反應元素。 例如，我將有這個長字符串，我只想將 substring 'dog' 包裹在一個跨度中。 所以它看起來像這樣：

I want a <span class="italicize-text">dog</span> really bad.

我目前有這個 function 它將作為字符串返回。

const italicizeText = (text: String, subtext: string) => 
{return text.replace(subtext,'<span class="italicize-text">' + subtext + '</span>');};

output 看起來像這樣：

'I want a <span class="italicize-text">dog</span> really bad.'

我想在不使用任何庫的情況下將 html 字符串轉換為反應元素。 我的公司目前不鼓勵我使用任何現有的 html 字符串來響應解析庫，因為它們沒有太多的星星。 也不要使用危險的SetInnerHTML。

我已經嘗試過https://www.npmjs.com/package/html-react-parser只是為了看看它是否可以解決問題，如果有一種簡單的方法可以復制他們正在做的事情，那就太好了！

Answer 1

您可以嘗試通過編寫 function 來復制它，它將 HTML 解析為解析樹，另一個遍歷解析樹並將其映射到 React。 我確定存在適合的 HTML 解析器。 到 React 的映射可以隨着您的 go 一起構建。

幫自己一個忙，寫很多單元測試。