0

我显然在这里遗漏了一些东西。我有一个简单的 React 类，我想将其转换为使用服务器端渲染，但我无法让初始组件在服务器上渲染。

我已经更改了我的初始 App 类以使用 renderToString

const App = ()=> {    
  var html = ReactDOMServer.renderToString(<div>
         <div className="jumbotron text-center">
           <h1>Welcome!</h1>
         </div>
         <div className="container">
           <MyComponent />
         </div>
       </div>);
   return html;
}

export default App;

我更新了 index.js 文件以使用 hydra：

ReactDOM.hydrate(<App />, document.getElementById('root'));

但是，我没有在浏览器中呈现 MyComponent。我得到的是浏览器页面中显示的 MyComponent 的 HTML。如果在浏览器中查看页面源代码，我可以看到组件的 HTML 没有随页面一起下载（水合物中使用的根元素为空）。当我使用 Developer's Tools 元素选项卡时，我可以看到我的所有组件的 HTML 都已插入到带引号的字符串内的根元素中（这就是它显示在浏览器页面中的原因）。

我假设正在发生的事情是我的组件没有在服务器上呈现，但仍在从浏览器中调用。结果是我的 renderToString 将一个字符串返回给我的所有组件的 HTML 的客户端，该 HTML 水合尽职地插入到我的根元素中。

我在这里想念什么？我使用 npx create-react-app 创建了应用程序，并且使用的是 16.8.0 版本。

4

0 回答 0