React如何在父組件中使用子組件

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

但是，當我嘗試封裝Child組件時，它沒有（它沒有顯示任何內容）。

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

您的方法沒有錯， 自動分號插入有什么用。 在第二個示例中，在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>
    );
  }
}