Реагировать Как использовать дочерний компонент в родительском компоненте

Question

Это работает в CodePen (это показывает «Test»):

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