Как я могу получить доступ к узлу DOM внутри компонента withStyle?

Question

Я работаю над проектом react, и в этом проекте мы с коллегами используем Material UI, по какой-то причине я хочу получить доступ к DOM node другого компонента, обернутого HOC. Я использовал реакцию ref для этого. но я просто получаю объект withStyle, см. ниже:

Это мой TableHead:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { TableHead as MaterialTableHead, TableRow } from '@material-ui/core';
import TableCell from './TableCell';

const TableHead = ({ classes, head, ...rest }) => (
  <MaterialTableHead {...rest}>
    <TableRow>
      {head.map(item => (
        <TableCell key={item.key} className={classes.headCell} style={{ width: item.width }}>
          {item.title}
        </TableCell>
      ))}
    </TableRow>
  </MaterialTableHead>
);

TableHead.propTypes = {
  classes: PropTypes.object.isRequired,
  head: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    width: PropTypes.string,
    render: PropTypes.func,
  })).isRequired,
};

TableHead.defaultProps = {};

const styles = () => ({
  headCell: {
    fontSize: '18px',
    color: '#0c1d38',
  },
});

export default withStyles(styles, { withTheme: true })(TableHead);

А в компоненте Table я хочу вычислить высоту компонента TableHead, поэтому я использую следующий код:

<TableHead ref={(header) => { this.header = header; }} head={head} />

и внутри componentDidMount Table компонента I console.log(this.header) и просто смотрите ниже:

введите описание изображения здесь

Я ищу в Интернете и нахожу несколько GitHub страниц с проблемами и пытаюсь innerRef вместо ref, но это мне не помогает.

Как я могу получить доступ к узлу DOM, чтобы вычислить его высоту?

Answer 1

Я знаю, что уже поздно, но для других людей, которые могут столкнуться с этой проблемой, я также предлагаю свое решение. Пользовательский интерфейс материала имеет RootRef API , который можно использовать в качестве HOC, если вы хотите получить узел DOM элемента:

Сначала импортируйте компонент:

import React from 'react';
import RootRef from '@material-ui/core/RootRef';

Затем оберните весь ваш элемент внутри компонента RootRef и создайте ссылку React. Но вместо добавления ссылки на ваш компонент и ссылки на него как этот ref={this.tableHeadRef}, вы должны добавить rootRef в HOC-каталог rootRef и ссылаться на него как: rootRef={this.tableHeadRef}, чтобы получить текущий узел DOM. Это может быть применено к любому компоненту, который использует withStyles HOC.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.tableHeadRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.tableHeadRef.current); // DOM node
  }

  render() {
    return (
      <RootRef rootRef={this.tableHeadRef}>
        <TableHead />
      </RootRef>
    );
  }
}

Answer 2

Что вы ищете, так это innerRef собственность. Просто замените ref на innerRef.

Пример:

<TableHead innerRef={(header) => { this.header = header; }} head={head} />

Источник (withStyles документы):

Некоторые детали реализации, которые могут быть интересны для понимания из:

Он добавляет свойство классов, чтобы вы могли переопределить внедренный класс имена со стороны.

Он добавляет свойство innerRef, чтобы вы могли получить ссылку на упакованный компонент. Использование innerRef идентично ref.

Он передает не статические свойства React, поэтому этот HOC более «Прозрачным». Например, он может быть использован для определения Статический метод getInitialProps () (next.js).

Ссылка: https://material -ui.com / customization / css-in-js / # withstyles-styles --- опции ---- компонент высшего порядка