React实现抽屉组件

简介

本文将会基于react实现简单的抽屉组件功能，当列表页点击时候，会显示抽屉详情。

Drawer.js

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

export const Drawer = ({isOpen, children}) => {
    const [visible, setVisible] = useState(false);

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

    return visible ? (
        

            {children}
        
    ) : null
}

App.js

function App() {
    const users = [{
        id: '123',
        name: 'vicyor'
    },
        {
            id: '456',
            name: 'john'
        }]
    return (
        

            {
                users.map(user => {

                     function UserListItem({user}){
                        const [open, setOpen ] = useState(false);
                        return (
                            

                                id:{user.id}
                                username: {user.name}
                                 {setOpen(!open)}} value={open?'关闭详情':'打开详情'}/>
                            
                        );
                    }
                    return 
                })
            }
        
    );
}