使用React渲染props.children

Question

有人能解釋爲什麼我必須將「props.children」包裹在一個「div」中才能使react-router工作。

這工作：

export default (props) => { 
     return (
      <div id="main-template"> 
       {props.children} 
      </div> 
     ); 
} 

然而，這並不：

export default (props) => { 
     return (
       {props.children} 
     ); 
} 

任何解釋，將不勝感激。

Answer 1

如果你有一個子節點，你不需要包裝props.children到{}，你可以只返回props.children

const Component = (props) => { 
    return props.children; 
}; 

Example

，如果你有一個以上的節點，例如

<p>1</p> 
<p>2</p> 
<p>3</p> 

you must wrap children一個根元素，因爲組件必須返回只有一個根元素，你不能回幾個，這樣

return (
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
) 

Answer 2

JSX變換的HTML代碼，尋找到JavaScript函數調用。返回多個頂層組件

return (
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
); 

被轉化成

return (
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text') 
); 

這是無效的。由於您需要返回單個值，因此不能渲染多個頂級元素。 React團隊一直在試圖弄清楚如何處理這個問題，但目前還沒有解決方案。