本仓库主要是学习 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 }