简介

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

Drawer.js

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

export const Drawer = ({isOpen, children}) => {const [visible, setVisible] = useState(false);useEffect(() => {setVisible(isOpen)}, [isOpen]);return visible ? (<div>{children}</div>) : null
}

App.js

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>);
}