基础知识-组件的嵌套
组件的嵌套
一个根元素标签
只能嵌套一层组件
如果想在组件下面继续嵌套,就需要在该组件的根元素下面嵌套组件
不能子组件下面嵌套孙子组件|标签|内容
组件嵌套
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'))