当前位置：首页 > article >正文

React 高阶组件和受控组件

article 2025/1/18 6:57:34

一、非受控组件

受控组件是指组件的状态由自定义状态控制，可以通过修改状态来影响组件。

非受控组件是指一些原生组件，如input,checkbox，由dom元素自己的属性控制。

1.1 受控组件demo

const Input = (value,handleChange)=>{
    return (
        <input value={value} onChange={handleChange} />
    )
}

二、高阶组件

高阶组件是装饰设计模式，给传入的组件添加某种功能。

2.1 高阶组件demo

const Input = (value, handleChange) => {
    return (
        <input value={value} onChange={handleChange}/>
    )
}

function WrappingLoading(Component, loadFunc) {
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        loadFunc()
        setLoading(false)
    }, []);
    return loading ? <div>loading</div> : <Component/>
}

export const LoadingInput = (value, handleChange, loadFunc) => {
    var Component = <Input value={value} handleChange={handleChange}/>
    return WrappingLoading(Component, loadFunc)
}

查看全文

http://www.kler.cn/a/300886.html