react 常用的组件设计模式

本仓库主要是学习 react patterns 搭建的个人仓库，下面是我的一些模式总结

仓库地址

基础使用（callback）

import React, {
    useState } from 'react'
import {
    Switch } from '../component'

interface IProps {
   
    onToggle: (args: any) => void
}

type IState = Readonly<{
   
    on: boolean;
}>;

function Usage() {
   
    const handleToggle = (args: any) => {
   
        console.log(args, 'click');
    }
    return (
        <Toggle onToggle={
   handleToggle} />
    )
}
Usage.title = 'Build Toggle'

export {
    Usage as default }

Toggle 组件 class component

/**
 * 2. 使用 class Component
 */
class Toggle extends React.Component<IProps, IState>{
   
    state = {
   
        on: false
    }
    handleClick = () => {
   
        this.setState(({
    on }) => ({
    on: !on }), () => {
   
            //callback
            this.props.onToggle(this.state.on);
        })
    }
    render() {
   
        const {
    on } = this.state
        return (
            <Switch on={
   on} onClick={
   this.handleClick} />
        )
    }
}

Toggle 组件 hooks版

/**
 * 1. 使用函数组件(hooks)
 */

const Toggle:React.FC<IProps>=(props)=>{
   
    const [on,setOn]=useState(false);
    const handleClick=()=>{
   
        setOn(!on);
        props.onToggle(!on);
    }
    return(
        <Switch on={
   on} onClick={
   handleClick}/>
    )
}

复合组件(Compound component)

复合组件设计模式一般应用在一些共享组件上。如 select 和 option , Tab 和TabItem 等，通过复合组件，使用者只需要传递子组件，子组件所需要的 props 在父组件通过React.Children.map和React.cloneElement进行props传递封装，因此引用子组件的时候就没必要传递所有 props 了。下面引用项目02.tsx实例说明:

使用处

function Usage() {
   
    const handleToggle = (args: any) => {
   
        console.log(args, 'click');
    }
    return (
        <Toggle onToggle={
   handleToggle}>
            <Toggle.On>The button is on</Toggle.On>
            <Toggle.Button />
            <Toggle.Off>The button is off</Toggle.Off>
        </Toggle>
    )
}

Toggle组件

interface IProps {
   
    onToggle: (args: any) => void;
}

class Toggle extends React.Component<IProps>{
   
    static On: React.FC<any> = ({
    on, children }