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

但是当我尝试封装一个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

你的方法没有错，你有点automatic semicolon insertion。在您的第二个示例中，在wget -O http://yoururltoload组件中，在Child之后有一个新行，其解释为：

return

所以你只需要将开头的paren移到同一行

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

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

Answer 2

在这里删除新行

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

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

2 个答案: