时间戳

首页 > 解决方案 > 为什么 ReactDOMServer.renderToString 不返回原始 HTML

reactjs - 为什么 ReactDOMServer.renderToString 不返回原始 HTML

问题描述

我写了一个简单的例子来测试ReactDOMServer.renderToString这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom-server.browser.development.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript">
          const e = React.createElement;

          class DivComponent extends React.Component {
            constructor(props) {
              super(props);
            }
            render() {
              return e(
                'div',
                {
                  className: 'div-component'
                },
                'This is a div'
              );
            }
          }
          document.getElementById('app').innerHTML = ReactDOMServer.renderToString(e('DivComponent'));
        </script>
    </body>
</html>

我期待它呈现：

<div id="app">
    <div class="div-component">This is a div</div>
</div>

但我实际得到的是：

<div id="app">
    <divcomponent data-reactroot=""></divcomponent>
</div>

我对 有什么误解ReactDOMServer.renderToString吗？我怎样才能得到我所期望的原始 HTML？

标签： reactjsreact-server

解决方案

您应该传递组件本身，而不是它的名称，它只是一个没有意义的字符串。

当你想要渲染 HTML 元素时传递一个字符串，如 React 文档中所述。

ReactDOMServer.renderToString(React.createElement(DivComponent));

推荐阅读