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元素。< / p>

谢谢！

Answer 1

将孩子资本化为Child。自定义组件类必须具有大写名称，这使它们与vanilla DOM元素区分开来。

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

的ID

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

1 个答案: