Question

我正在使用ReactDOMServer通过服务器端生成静态网站，它似乎不喜欢这个组件特别是开放<!DOCTYPE html>标记。（见下文）

我正在这样做，因为我正在尝试使用React通过服务器端完全呈现页面以实现IE8兼容性，并最终成为同构应用程序。

是否有关于如何通过服务器端使用React完全呈现静态标记的最佳实践（包含打开的html标记等）？

'use strict';

import React from 'react';

export default class Root extends React.Component {

  render() {
    return (
      <!DOCTYPE html>
      <head>
      <title>Hello World!</title>
      </head>
      <body>

      <h1>Hello World!</h1>

      </body>
      </html>
    );
  }

}

let html = ReactDOMServer.renderToStaticMarkup(<Root />);

加分：虽然简单的DOCTYPE打破了它，但最终我想在顶部添加如下所示的其他IE标记。

<!--[if lt IE 7]>  <html dir="ltr" lang="en-US" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html dir="ltr" lang="en-US" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html dir="ltr" lang="en-US" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html dir="ltr" lang="en-US" class="no-js"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

Answer 1

您可能希望在React组件之外发出DOCTYPE标头，并将<!DOCTYPE html>替换为<html>节点。 JSX不是HTML，只是将您的元素映射到相应的React.createElement（）调用，这对于DOCTYPE没有意义。

看看这些以供参考：

Emitting a DOCTYPE before rendering the component

res.send('<!doctype html>\n' + ReactDOM.renderToString(<Html />));

An HTML component that handles tag generation

render() { return ( <html lang="en-us"> <head></head> ... </html>) }

ReactDOMServer.renderToStaticMarkup完整标记

1 个答案: