javascript - 将 React 中的 HTML (JSX) 转换为字符串

Question

我将如何获取存储在变量中的 HTML 并将其转换为字符串？

拿着这个：

var html = <div>html</div>;

并将其变成这样：

var html = "<div>html</div>"

标签： javascripthtmlreactjs

Answer 1

根据标记的副本，您可以使用ReactDOMServer.renderToString(element)，或ReactDOMServer.renderToStaticMarkup(element)将 React 元素呈现为 HTML 字符串（renderToStaticMarkup()不呈现 React 内部使用的额外 DOM 属性，例如data-reactroot）。

这两种方法都可以在服务器和浏览器环境中使用。

function App() {

const html = (<div>html</div>);

return (
  <div>
    {ReactDOMServer.renderToStaticMarkup(html)}
  </div>
  )
}

ReactDOM.render(
  <App  />,
  document.getElementById("root")
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom-server.browser.production.min.js"></script>

<div id="root"></div>