如何在 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 导入