Question

我显然在这里丢失了一些东西。我有一个简单的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文件更新为使用水合物：

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

但是，我没有在浏览器中呈现MyComponent。我得到的是在浏览器页面中显示的MyComponent HTML。如果在浏览器中查看页面源，则可以看到该组件的HTML没有随页面一起下载（水合物中使用的根元素为空）。当我使用“开发人员的工具”元素选项卡时，可以看到组件的所有HTML都已插入到带引号的字符串内的根元素中（这就是为什么它显示在浏览器页面中的原因）。

我假设正在发生的事情是，我的组件不是在服务器上呈现的，而是仍在浏览器中调用。结果是我的renderToString返回了一个字符串到所有组件HTML的客户端，这些HTML忠实地插入了我的根元素。

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

无法调用React中的服务器端渲染

0 个答案: