作出反應如何在父組件

Question

這個作品在CodePen使用一個子組件（它顯示「測試」）：

class Parent extends React.Component { 

    render() { 
    return (<h1> Test </h1>) 
    } 
} 
/* 
* Render the above component into the div#app 
*/ 
React.render(<Parent />, document.getElementById('app')); 

但是當我嘗試封裝子組件，它沒有（它不沒有顯示任何東西）。

class Child extends React.Component { 

    render() { 
    return 
    (
     <div> 
     <h1> test </h1> 
     </div> 
    ); 
    } 
} 
class Parent extends React.Component { 

    render() { 
    return (<Child />) 
    } 
} 
/* 
* Render the above component into the div#app 
*/ 
React.render(<Parent />, document.getElementById('app')); 

有人能發現我做錯了什麼嗎？

Answer 1

新的生產線沒有什麼錯你的方法，什麼位你是automatic semicolon insertion。在你的第二個例子，在Child成分，有return後一個新的生產線，這被解釋爲：

render() { 
    return; // implied semicolon - render returns nothing! 
      // following lines are discarded. 
    (
    <div> 
    <h1> test </h1> 
    </div> 
); 
} 

所以你只需要移動打開括號是在同一條直線

class Child extends React.Component { 

    render() { 
    return (
     <div> 
     <h1> test </h1> 
     </div> 
    ); 
    } 
} 

https://jsfiddle.net/69z2wepo/70702/

Answer 2

只是刪除此

class Child extends React.Component { 
render() { 
    return (
     <div> 
     <h1> test </h1> 
     </div> 
    ); 
    } 
}