父子组件嵌套
父组件
import React,{ Component } from "react"
import Son from "./Son"//在父组件直接引入子组件
export default class Father extends Component {
render(){
return(
<div>
<p>Father</p>
{/* 子组件 */}
<Son/>
</div>
)
}
}
子组件
import React,{ Component } from "react"
export default class Son extends Component {
render () {
return(
<div>
<p>son</p>
</div>
)
}
}
App组件
//项目最大的组件
//在component文件夹下的组件在这里引入使用
import React from "react" //必须引入,不引入就不支持jsx语法
import ClassModule from "./components/ClassModule"
import Father from "./components/Father"
// import ReactDOM from "react-dom"
//函数式组件
const App = (props) => {
return(
<div>
<p>{props.name}</p>
<ClassModule age="18" sex="aaa"/>
<Father/>
</div>
)
}
export default App
组件组合
<Father><Son/><Father/>
父组件
import React,{ Component } from "react"
// import Son from "./Son"//在父组件直接引入子组件
export default class Father extends Component {
render(){
return(
<div>
<p>Father</p>
{/* 组件的组合就是通过this.props.children来接受组件的内容 */}
{this.props.children}
</div>
)
}
}
子组件
import React,{ Component } from "react"
export default class Son extends Component {
render () {
return(
<div>
<p>son</p>
</div>
)
}
}
App组件
//项目最大的组件
//在component文件夹下的组件在这里引入使用
import React from "react" //必须引入,不引入就不支持jsx语法
import ClassModule from "./components/ClassModule"
import Father from "./components/Father"
import Son from "./components/Son"
// import ReactDOM from "react-dom"
//函数式组件
const App = (props) => {
return(
<div>
<p>{props.name}</p>
<ClassModule age="18" sex="aaa"/>
{/* 组件的组合 */}
<Father>
<Son/>
</Father>
</div>
)
}
export default App