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>
    );
}
相关推荐
每天吃饭的羊9 小时前
state和ref
前端·javascript·react.js
前端啵啵猪10 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
海海思思11 小时前
Redux Toolkit的前世今生:从繁琐到简洁的状态管理革命
react.js·redux
小爱同学_11 小时前
React知识:useState和useRef的使用
前端·react.js
知识分享小能手15 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
举个栗子dhy18 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
薛定谔的算法19 小时前
《虚拟 DOM 与 Diff 算法:用 1500 字把它讲成“人话”》
前端·react.js·前端框架
鹏多多19 小时前
前端项目eslint配置选项详细解析
前端·vue.js·react.js
知识分享小能手21 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue