Ребенок не отображается должным образом в родительском компоненте

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 ('контейнера');

И

2) document.getElementById ('контейнер.');

В моем случае только 1) работает, и когда я пытался использовать 2) в ReactDOM.render(), у меня появилось сообщение об ошибке: Target container не является элементом DOM.

Спасибо!

Answer 1

Заглавие ребенка Child. Пользовательские классы компонентов должны иметь имена капиталов, которые отличает их от элементов DOM ванили.

Для вашего второго вопроса, прочитайте имя метода, getElementById. У вашего элемента контейнера нет идентификатора с именем '.container'