React实现抽屉组件

简介

本文将会基于react实现简单的抽屉组件功能。抽屉会在以下几个方面改进。

1、抽屉显示状态由父组件state控制。

2、如果抽屉不需要显示时候,返回null。

Drawer.js

抽屉组件,通过父组件传递isOpen状态来开启或关闭抽屉。

javascript 复制代码
export const Drawer = ({isOpen, children}) => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        setVisible(isOpen)
    }, [isOpen]);

    return visible ? (
        <div>
            {children}
        </div>
    ) : null
}

App.js

javascript 复制代码
function App() {
    const users = [{
        id: '123',
        name: 'vicyor'
    },
        {
            id: '456',
            name: 'john'
        }]
    return (
        <div className="App">
            {
                users.map(user => {

                     function UserListItem({user}){
                        const [open, setOpen ] = useState(false);
                        return (
                            <div>
                                <span>id:{user.id}</span>
                                <Drawer isOpen={open}><span>username: {user.name}</span></Drawer>
                                <input type='button' onClick={event => {setOpen(!open)}} value={open?'关闭详情':'打开详情'}/>
                            </div>
                        );
                    }
                    return <UserListItem user = {user} key = {user.id}/>
                })
            }
        </div>
    );
}
相关推荐
10年前端老司机10 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi1 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
FairyDiana2 小时前
从 "等一下" 到 "马上说":React 牵手 DeepSeek 玩转文本大模型
react.js·ai编程
山有木兮木有枝_2 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
多啦C梦a2 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
轻语呢喃4 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
Jolyne_5 小时前
可配置永久生效的Table组件的封装过程
前端·react.js
胡gh5 小时前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js
_一两风5 小时前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js
红衣信6 小时前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试