子组件没有父组件正确呈现

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（ '容器'）;

AND

2）的document.getElementById（ '容器'）;

在我的情况下，只有1）的作品，当我试图使用2）在ReactDOM.render（），我得到一个错误消息说：目标容器不是一个DOM元素。

谢谢！

Answer 1

大写的孩子是Child。自定义组件类必须具有大写名称，从而将它们与香草DOM元素区分开来。

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