如何在 React 17 中將字符串轉換為 JSX

Question

給定一些字符串：

const someString = "<p>Here is some string <strong>with some nested HTML</strong></p>"

我可以從字符串中刪除<p>和</p> ，然后使用 React 執行以下操作：

React.createElement('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

（我們假設html是刪除p標簽的字符串someString ）

然而，React 17 發布了新的 JSX 轉換： https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

這意味着 React 不再編譯為React.createElement而是直接編譯為 JSX。

有沒有辦法用新的 JSX 轉換來完成這個？

Answer 1

事實上是的，你可以使用類似於React.createElement的JSX語法

React.createElement('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

會變成

_jsx('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

但是，您需要導入： import { jsx as _jsx } from 'react/jsx-runtime';

注意：我的問題是 Typescript 是抱怨Could not find a declaration file for module 'react/jsx-runtime'. 我需要添加// @ts-ignore以忽略 JSX 導入