【问题标题】：How I can access to DOM node inside of withStyle component?如何访问 withStyle 组件内的 DOM 节点？
【发布时间】：2018-11-09 14:21:40
【问题描述】：

我正在开发react 项目，在这个项目中，我和我的同事正在使用Material UI，出于某种原因，我想访问由HOC 包装的另一个组件的DOM node。为此，我使用了 react 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 的 componentDidMount 内部，组件 I console.log(this.header) 如下所示：

enter image description here

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

如何访问 DOM 节点来计算其高度？

【问题讨论】：

标签： javascript reactjs material-ui react-with-styles

【解决方案1】：

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

例子：

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

来源（`withStyles` docs）：

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

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

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

它转发非 React 静态属性，所以这个 HOC 更 “透明”。例如，它可以用来定义一个 getInitialProps() 静态方法 (next.js)。

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

【讨论】：

innerRef 的结果是：Stateless function components cannot be given refs. Attempts to access this ref will fail。因为TableHeader是一个无状态函数，我该如何解决呢？
你对我有什么想法吗？
同样的问题，在github上除了github.com/mui-org/material-ui/issues/10106找不到任何东西

【解决方案2】：

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

首先导入组件：

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

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

【讨论】：

来源（withStyles docs）：

来源（`withStyles` docs）：