Как получить высоту Диалога в пользовательском интерфейсе материала, используя ref? - PullRequest
Новая
       11

Как получить высоту Диалога в пользовательском интерфейсе материала, используя ref?

1 голос
/ 16 марта 2019

Я использую Material UI для своего проекта React, и я нахожусь в ситуации, когда я хочу получить высоту диалога.Итак, я попытался сделать что-то вроде этого: 

import Dialog from '@material-ui/core/Dialog';

class MyDialog extends React.Component {
   constructor(props) {
      super(props);

      this.dialogRef = React.createRef();
   }

   render() {
      if (this.dialogRef.curent) {
         console.log(this.dialogRef.current);
      }

      return (
         <Dialog maxWidth='sm'
                 innerRef={this.dialogRef}
         >
            // Rest removed for brevity
         </Dialog>
      );
   }
}

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withLocalize(MyDialog)));

Теперь с кодом выше, я вижу объект, напечатанный линией console.log(this.dialogRef), и у него есть свойство с именем refs, которое являетсяпустой объектКак я могу получить высоту Dialog в этом случае?Либо внутри компонента MyDialog, либо предполагается, что у меня есть другой компонент с именем Main, который вызывает MyDialog внутри его метода рендеринга?

Обратите внимание, что я использую "react": "^16.6.3" и "@material-ui/core": "^3.6.1".

Ответы [ 2 ]

0 голосов
/ 16 марта 2019

Я полагаю, что RootRef в этом случае найдет неправильный элемент DOM. Я думаю, что вы хотите, чтобы div из компонента Paper внутри Dialog получал высоту. Вы можете сделать это, переопределив компонент для бумаги: 

const PaperComponent = ({ dialogRef, ...other }) => {
  return <div ref={dialogRef} {...other} />;
};

     <Dialog
        PaperProps={{ component: PaperComponent, dialogRef: this.dialogRef }}
      >

Вот модифицированная версия вашей песочницы: https://codesandbox.io/s/2vxz5lq1jr

0 голосов
/ 16 марта 2019

Вы можете использовать ref опору напрямую, так как Material-UI v4.0.0-alpha.3. 

function MyComponent() {
  const myRef = React.useRef();

  return <Dialog ref={myRef} />;
}

https://codesandbox.io/s/k0r6vj63l3

...