为什么 ReactDOMServer.renderToString 不返回原始数据 HTML

Question

我写了一个简单的例子来测试 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？

Answer 1

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

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

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

为什么 ReactDOMServer.renderToString 不返回原始数据 HTML

Why ReactDOMServer.renderToString not returning raw HTML

reactjs

react-server