组件的嵌套和组合

嵌套

import React from 'react'
class Son extends React.Component {
    render() {
        return (
            <div>son组件</div>
        )
    }
}
class Father extends React.Component {
    render() {
        return (
            <div>
                father组件
                <Son/>
                {/* 将子组件以标签的形式放入父组件的jsx中，此时Father组件就是Son组件的父组件 */}
            </div>
        )
    }
}
export default Father

组合

• 类组件

类组件中实现组合使用{this.props.children} 可以做类似Vue中插槽的功能，用于组合

import Tab from './Tab'
import Content from './Content'
import TabBar from './TabBar'
import React from 'react'
 class App extends React.Component {
    render() {
        return (
            <div>
                <TodoList>
                    <Tab />
                    <Content />
                    <TabBar />
                </TodoList>
            </div>
        )
    }
}
class TodoList extends React.Component {
    render() {
        return (
            <div>
                <h1>todoList</h1>
                {this.props.children} // 类似Vue中的插槽
            </div>
        )
    }
}
export default App

• 函数组件

在函数组件中this指向是undefined
使用参数获取children以完成组合

const TodoList = (props) => {
    return (
        <div>
            <h1>todoList</h1>
            {props.children}
        </div>
    )
}