为什么 ReactDOMServer.renderToString 不返回原始 HTML答案

【问题标题】：Why ReactDOMServer.renderToString not returning raw HTML为什么 ReactDOMServer.renderToString 不返回原始 HTML
【发布时间】：2021-02-24 12:04:46
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-server

【解决方案1】：

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

当您想要按照 React 文档中的描述呈现 HTML 元素时传递一个字符串。

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

【讨论】：

是的。这就是原因。谢谢！