使用与类和功能的React Hook参考

Question

我已经离开了React游戏了一段时间。回来，我正在尝试实现已用钩子重写的材料UI库。

在我眼中，它似乎非常混乱 spagetti代码。

我只想引用一个函数，以便我可以切换抽屉，我该怎么做？

// Old class
export default class DefaultContainer extends Component<ViewProps, any> {
    render() {
        return (
            <View>
                <MainAppBar
                    onPress={() => this.onMenuPressed()}
                />
                {this.props.children}
                <MainDrawer
                    ref={'drawer'}
                />
            </View>
        );
    }
    onMenuPressed = () => {
       // TODO The bit that isn't working
       (this.refs['drawer'] as Drawer).handleToggle()
    }
}

现在新材料UI抽屉

// New Drawer (3x more code now..)
const useStyles = makeStyles({
    list: {
        width: 280,
    },
    fullList: {
        width: 'auto',
    },
})
type Props = {
}
function MainDrawer(props: Props, ref: any) {
    const classes = useStyles();
    const [state, setState] = React.useState({
        left: false,
    });
    const toggleDrawer = () => (
        event: React.KeyboardEvent | React.MouseEvent,
    ) => {
        if (
            event.type === 'keydown' &&
            ((event as React.KeyboardEvent).key === 'Tab' ||
                (event as React.KeyboardEvent).key === 'Shift')
        ) {
            return;
        }
        setState({ ...state, left: true });
    };
    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        toggleDrawer()
    });
    const sideList = () => (
        <div
            className={classes.list}
            role="presentation"
            onClick={toggleDrawer()}
            onKeyDown={toggleDrawer()}
        >
            <List>
                <ListItem button key={'drawer_item'}>
                    <ListItemIcon><GroupIcon /></ListItemIcon>
                    <ListItemText primary={'Test Item'} />
                </ListItem>
            </List>
        </div>
    );
    return (
        <div>
            <Button onClick={toggleDrawer()}>Open Left</Button>
            <Drawer open={state.left} onClose={toggleDrawer()}>
                {sideList()}
            </Drawer>
        </div>
    );
}
export default forwardRef(MainDrawer);

Answer 1

我正在努力理解为什么您需要从MainDrawer中调用功能，而不仅仅是利用props的使用，例如。

容器

export default function DefaultContainer(props: ViewProps) {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  // assuming it's a toggle?
  const toggleMenu = React.useCallback(() => setDrawerOpen(open => !open));
  return (
    <View>
        <MainAppBar onPress={toggleMenu} />
        {this.props.children}
        <MainDrawer open={drawerOpen} />
    </View>
  )
}

MAINDRAWER

function MainDrawer(props: Props) {
  const [open, setOpen] = React.useState(props.open);
  ...
  const toggleDrawer = React.useCallback(() => setOpen(open => !open));
  return (
    <div>
        <Button onClick={toggleDrawer}>Open Left</Button>
        // use prop to determine whether drawer is open or closed
        <Drawer open={open} onClose={toggleDrawer}>
          {sideList()}
        </Drawer>
    </div>
  );
}