JSX 将 html 转换为纯 React

Question

我是 JSX 的新手，专门为 gutenberg 块学习这个我正在尝试以某种方式将 html 的字符串转换为与 babel 的纯反应我看到 babel transform 中有一个函数可以实现该功能，但我无法使用它，而且几乎没有任何关于它的信息，如果无论如何都可以以这种方式转换东西，请告诉我它是什么下面是代码示例

这个

let str = `
<div>
    <h1>test</h1>
</div>
`

至此

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "test"));

Answer 1

您可以使用 react-html-parser。它正是这样做的。

https://www.npmjs.com/package/react-html-parser

例子

import ReactHtmlParser from 'react-html-parser';

const HTMLRenderingComponent = () => {
    const htmlString = '<div>Example HTML string</div>';
    return ReactHtmlParser(htmlString);
}

Answer 2

你可以使用 react-html-parser。它正是这样做的。

https://www.npmjs.com/package/react-html-parser

示例：

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

JSX 将 html 转换为纯 React

JSX transform html to pure react

javascript

jsx

reactjs

babeljs

例子