하위 구성 요소가 상위 구성 요소에서 제대로 렌더링되지 않습니다

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) 작동하고 내가 ReactDOM.render()에서) 2를 사용하려고 할 때, 나는 그 말을 오류 메시지를 받았습니다 : 대상 컨테이너가 DOM 요소가 아닙니다.

감사합니다.

Answer 1

자녀를 Child으로 대문자로 작성하십시오. 사용자 정의 구성 요소 클래스에는 바닐라 DOM 요소와 구별되는 대문자 이름이 있어야합니다.

두 번째 질문의 경우 메서드 이름 getElementById을 읽으십시오. 컨테이너 요소의 이름은 '.container'