子コンポーネントが親コンポーネントで正しくレンダリングされない

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するのは非常に新しいですこの質問は愚かかもしれない。しかし、親コンポーネント、つまり「My heading」がページに表示され、子コンポーネントが表示されないのはなぜですか？私は、親コンポーネントと子コンポーネントの両方がページに表示されることを期待しています。

また、違いは何である：

1）document.querySelector（ 'コンテナ'）は、

AND

2）のdocument.getElementById（ 'コンテナー'）。

私の場合は

、唯一1）動作し、私はReactDOM.render（）で）2を使用しようとしたとき、私はその旨のエラーメッセージが表示されました：ターゲットコンテナはDOM要素ではありません。

ありがとうございました！

Answer 1

子供を大文字にするChildです。カスタムコンポーネントクラスには、バニラDOM要素と区別するための大文字の名前が必要です。

2番目の質問では、メソッド名getElementByIdを読んでください。あなたのコンテナ要素のIDは'.container'