2016-02-09 122 views
1

我使用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]-->

回答

2

您可能會想發出DOCTYPE頭你的陣營組件的外面,並用<html>節點替換<!DOCTYPE html>。 JSX不是HTML,只是將您的元素映射到相應的React.createElement()調用,這對DOCTYPE沒有意義。

看看這些供參考:

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

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