Как я могу получить доступ к 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

То, что вы ищете, это 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/

Answer 2

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

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

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

Затем оберните весь ваш элемент в компонент RootRef и создайте React ref. Но вместо добавления ссылки на ваш компонент и ссылки на нее, как этоref={this.tableHeadRef}, вы должны добавить rootRef в корневой каталог HOC и сослаться на него следующим образом: 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>
    );
  }
}