Использование ссылки React Hooks с классом и функцией - PullRequest
Новая
       13

Использование ссылки React Hooks с классом и функцией

0 голосов
/ 07 июля 2019

Я давно вышел из игры React.Вернись, и я пытаюсь реализовать библиотеку Material UI, которая была переписана с помощью Hooks.

Мне кажется, это очень запутанно + спагетти-код в моих глазах.

Я просто хочу сослатьсяфункция, чтобы я мог переключать ящик, как я могу это сделать? 

// 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()
    }
}

Теперь новый ящик с пользовательским интерфейсом материала 

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

1 Ответ

1 голос
/ 07 июля 2019

Я изо всех сил пытаюсь понять, почему вам нужно вызывать функцию изнутри 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>
  );
}
...