基础知识-组件的嵌套 ​

import React , { Component} from 'react';
import ReactDom from 'react-dom';

// NavBarChild组件
class NavBarChild extends Component {
    render(){ return (<div>我是NavBar组件里面的子组件</div>)}
}

// NavBar组件
class NavBar extends Component {
    render() {
        // 如果想在当前组件里面嵌套组件  就在该组件的根元素里面嵌套
        return (
            <div>
                //我是NavBarChild组件
                <NavBarChild></NavBarChild>
            </div>
        )
    }
}

// SideBar组件
class SideBar extends Component{
    render(){ return(<div>我是SideBar组件</div>)}
}

// Footer组件
const Footer   = () => (<div>我是Footer组件</div>)

// App根组件
class App extends Component {
  render() {
      return (
        // 根组件
          <div>
             // 组件之间的嵌套
              <NavBar></NavBar>
              <SideBar></SideBar>
              <Footer></Footer>

              //正确写法 看NavBar类组件里面的嵌套

              // 错误写法 不能多层嵌套 
               <NavBar> 
                  <div>1111</div>
               </NavBar> 
          </div>
    )
  }
}

React.render(<App/> , document.getElementById('root'))