子组件未在父组件中正确呈现

Question

以下是父组件：

 class Parent extends Component {
     constructor(props) {
         super(props);
         this.state = {

         }
     }

     render() {
         return (
             <div>
                 <h1>My heading</h1>
                 <child />
             </div>
         );
     }
 }

 ReactDOM.render(<Parent />, document.querySelector('.container'));

以下是子组件：

 import React from 'react';

 class child extends React.Component {
     constructor(props) {
         super(props);
         this.state = {}
     }

     render() {
         return (<p>My paragraph</p>);
     }
 }

 export default child;

我对React.js很陌生，所以这个问题可能很愚蠢。 但是，为什么页面上仅显示父组件（即“我的标题”）而子组件没有显示？ 我希望父级和子级组件都显示在页面上。

另外，两者之间有什么区别？

1） document.querySelector（'。container'） ;

和

2） document.getElementById（'。container'） ;

就我而言，只有1）有效，当我尝试在ReactDOM.render（）中使用2）时，我收到一条错误消息，指出：目标容器不是DOM元素。

谢谢！

Answer 1

将Child大写为Child 。 自定义组件类必须具有大写名称，这使它们与原始DOM元素区分开。

对于第二个问题，请阅读方法名称getElementById 。 您的容器元素没有名为'.container'的ID