Реакция - отправка реф как проп не работает - PullRequest
Новая
       30

Реакция - отправка реф как проп не работает

2 голосов
/ 09 июля 2019

Я использую библиотеку реагировать-mui в своем проекте, где я хотел бы реализовать компонент MenuList, находящийся в составе MenuList здесь . В моем приложении я посылаю ref как prop до child component, где у меня есть menu. Вы можете увидеть пример кода и коробки здесь . Когда я отправляю ref и setRef метод как props из родительского компонента, как это: 

state = {
    open: false,
    ref: React.createRef()
  };

  setRef = element => {
    this.setState({ ref: element });
  };

  handleToggle = () => {
    this.setState(state => ({ open: !state.open }));
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <MenuListComposition
        setRef={this.setRef}
        handleToggle={this.handleToggle}
        handleClose={this.handleClose}
        open={this.state.open}
        ref={this.state.ref}
      />
    );
  }

Для дочернего компонента, имеющего кнопку меню: 

    <MenuButton
      className={classes.button}
      handleToggle={handleToggle}
      setRef={setRef}
      open={open}
      ref={ref}
   />

Тогда компонент Popper, у которого есть список меню, открывается не в том месте, которое вы можете увидеть в примере CodeSanbox, если нажать на TOGGLE MENU GROW button. 

      <Popper open={open} anchorEl={ref} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              id="menu-list-grow"
              style={{
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom"
              }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList>
                    <MenuItem onClick={handleClose}>Profile</MenuItem>
                    <MenuItem onClick={handleClose}>My account</MenuItem>
                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>

Что я делаю не так и как это исправить, или как я могу использовать ref в stateless компоненте, где я бы не посылал ref как prop?

Ответы [ 2 ]

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

Реф не может быть передан как опора в Реакте.Ссылки обычно присваиваются свойству экземпляра при создании компонента, поэтому на них можно ссылаться по всему компоненту.Более того, когда ссылка передается элементу в рендере, ссылка на узел становится доступной в текущем атрибуте ссылки.

React предоставляет метод React.forwardRef для передачи ссылок виерархия компонентов.Обычно это не требуется для большинства компонентов в приложении.Однако это может быть полезно для некоторых типов компонентов, особенно в библиотеках компонентов многократного использования. Читать о forwardRef 

    const ButtonWrapper = React.forwardRef((props, ref) => (
      <button ref={ref}>
        {props.children}
      </button>
    ));

    // You can now get a ref directly to the DOM button:
    const ref = React.createRef();
    <ButtonWrapper ref={ref}>Click me!</ButtonWrapper>;
1 голос
/ 09 июля 2019

ref - ключевое слово вactjs. Когда вы используете ref как опору, он связывает компонент с объектом ref. Переименуйте его по своему вкусу на FancyButton компонент и MenuListComposition компонент.

От Реакция документации.

React поддерживает специальный атрибут, который вы можете прикрепить к любому компоненту.

Рабочий пример с ref, переименованным в parentRef в обоих компонентах.

EDIT:

Как указал Вайбхав Шукла, вы можете использовать React.forwardRef на FancyButton и MenuListComposition, что, вероятно, является правильным способом сделать это.

Рабочий пример

...