Javascript 如何访问withStyle组件内部的DOM节点？

我正在从事

react

项目，在这个项目中，我的同事和我正在使用

materialui

，出于某种原因，我想访问另一个由

HOC

包装的组件的

DOM节点。我为此使用了react
ref
。但是我只得到
with style
对象，请参见以下内容：

这是我的
桌面
：

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);

以及
表
组件I
控制台.log（this.header）
的
componentDidMount
的内部，请参见以下内容：


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

如何访问DOM节点以计算其高度？
您要查找的是
innerRef
属性。只需将
ref
替换为
innerRef

例如：

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

{this.header=header；}}}head={head}/>

来源（
withstyle
docs）：
了解一些可能感兴趣的实现细节
其中：

它添加了一个classes属性，以便您可以重写注入的类
来自外部的名字

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

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

参考资料：
我知道时间已经晚了，但对于可能面临此问题的其他人，我也提供了我的解决方案。材质UI有一个，您可以在需要获取元素DOM节点的情况下使用它：

首先导入组件：

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

然后将整个元素包装在一个RootRef组件中并创建一个React ref。但是，您不应该像这样在组件上添加一个ref并将其引用到ref
ref={this.tableHeadRef}
，而应该向RootRef HOC添加
RootRef
，并像这样引用到您的ref:
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>
    );
  }
}

类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
this.tableHeadRef=React.createRef（）；
}
componentDidMount（）{
console.log（this.tableHeadRef.current）；//DOM节点
}
render（）{
返回(
);
}
}
innerRef的结果是：
无状态函数组件不能被赋予ref。尝试访问此ref将失败
。由于
TableHeader
是一个无状态函数，我如何解决它？你有什么想法吗？这里有同样的问题，除了
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>
    );
  }
}