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>
    );
}
相关推荐
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
Jackson_Mseven8 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
前端小盆友11 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
OLong12 小时前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
摸鱼仙人~12 小时前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
namehu12 小时前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
杨进军12 小时前
React 使用 MessageChannel 实现异步更新
react.js
namehu12 小时前
浏览器中的打印魔法:Lodop与系统打印机
前端·react.js
如果'\'真能转义说12 小时前
React自学 基础一
前端·react.js·前端框架
巴巴_羊12 小时前
react setstate
react.js