作出反应如何在父组件

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> 
    ); 
    } 
}