React组件组合和嵌套

父子组件嵌套

父组件

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