我如何访问withStyle组件中的DOM节点？

Question

我正在研究react项目，在这个项目中我的同事和我正在使用Material UI ，出于某种原因，我想访问另一个由HOC包装的组件的DOM node 。 我使用了反应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} />

在Table组件I的console.log(this.header)的componentDidMount ，如下所示：

在此输入图像描述

我在网上搜索并找到一些GitHub问题页面并尝试使用innerRef而不是ref但它对我没有帮助。

我如何访问DOM节点来计算它的高度？

Answer 1

您正在寻找的是innerRef属性。 只需用innerRef替换ref 。

例：

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

来源（ withStyles docs）：

一些可能有趣的实现细节：

它添加了一个classes属性，因此您可以从外部覆盖注入的类名。

它添加了一个innerRef属性，因此您可以获得对包装组件的引用。 innerRef的用法与ref相同。

它转发非React静态属性，因此这个HOC更“透明”。 例如，它可用于定义getInitialProps（）静态方法（next.js）。

参考： https ： //material-ui.com/customization/css-in-js/#withstyles-styles---options----higher-order-component

Answer 2

我知道现在已经很晚了，但对于可能面临这个问题的其他人，我也提供了解决方案。 Material UI有一个RootRef API ，您可以在需要获取元素DOM节点的情况下使用HOC作为HOC：

首先导入组件：

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

然后将整个元素包装在RootRef组件中并创建一个React引用。 但是不要在你的组件上添加引用并将它引用到引用，例如ref={this.tableHeadRef} ，你应该将rootRef添加到rootRef HOC并将它引用到你的ref中，如下所示： rootRef={this.tableHeadRef} to获取当前的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>
    );
  }
}