react html格式转译成tsx格式的几种方发

将 HTML 格式的代码转换成 React TSX（TypeScript JSX）格式的常用方案有以下几种：

1. 使用 React 的内置 JSX 语法

React 提供了一种类似 HTML 标记的 JSX 语法，可以直接在 TSX 文件中使用。例如，将以下 HTML 代码：

<div class="container">
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</div>

转换成 React TSX 代码，可以直接将 HTML 标签转换成对应的 React 组件，如下所示：

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

2. 使用第三方的 HTML 转换器库

可以使用第三方的 HTML 转换器库，将 HTML 格式的代码转换成 React TSX 代码。常用的库有 `html-to-react` 和 `html-to-react-components`。例如，使用 `html-to-react` 将 HTML 代码转换成 React TSX 代码的示例代码如下：

import React from 'react';
import { Parser } from 'html-to-react';

function App() {
  const html = `
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </div>
  `;

  const parser = new Parser();
  const reactElement = parser.parse(html);

  return <>{reactElement}</>;
}

export default App;

3. 使用 DOM 解析器手动转换

可以使用 DOM 解析器手动解析 HTML 格式的代码，然后将每个 HTML 标签转换成对应的 React 组件。例如，将以下 HTML 代码：

<div class="container">
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</div>

转换成 React TSX 代码的示例代码如下：

import React from 'react';

function App() {
  const html = `
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </div>
  `;

  const domParser = new DOMParser();
  const doc = domParser.parseFromString(html, 'text/html');

  const containerElement = doc.querySelector('.container');
  const h1Element = containerElement.querySelector('h1');
  const pElement = containerElement.querySelector('p');

  return (
    <div className="container">
      <h1>{h1Element.textContent}</h1>
      <p>{pElement.textContent}</p>
    </div>
  );
}

export default App;

以上是将 HTML 格式的代码转换成 React TSX 格式的常用方案。不同的方案适用于不同的场景，可以根据自己的需求选择合适的方案。