ReactDOMServer.renderToStaticMarkup完整標記

我使用ReactDOMServer通過服務器端生成一個靜態網站，它似乎並不喜歡這個組件特別是開放<!DOCTYPE html>標籤。（見下文）ReactDOMServer.renderToStaticMarkup完整標記

我這樣做，因爲我試圖使用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]-->

來源

2016-02-09 vutran

您可能會想發出DOCTYPE頭你的陣營組件的外面，並用<html>節點替換<!DOCTYPE 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>) }

來源

2016-02-09 17:45:02

ReactDOMServer.renderToStaticMarkup完整標記

回答

相關問題