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>
    );
}
相关推荐
vvilkim7 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
小矮马10 小时前
React-组件和props
前端·javascript·react.js
懒羊羊我小弟10 小时前
React Router v7 从入门到精通指南
前端·react.js·前端框架
gaog2zh10 小时前
0803分页_加载更多-网络ajax请求2-react-仿低代码平台项目
react.js·ajax·分页·加载更多
Mars狐狸10 小时前
AI项目改用服务端组件实现对话?包体积减小50%!
前端·react.js
吃面必吃蒜11 小时前
从 Vue 到 React:React 合成事件
javascript·vue.js·react.js
举个栗子dhy12 小时前
【血缘关系图下钻节点,节点展开收起功能,递归和迭代问题处理】
javascript·react.js
Aiolimp12 小时前
React中CSS使用方法
前端·react.js
Moment12 小时前
受控组件和非受控组件的区别?别再傻傻分不清了 😁😁😁
前端·javascript·react.js
数据智能老司机13 小时前
React关键概念——处理事件和状态
react.js·前端框架·前端工程化