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

Question

我正在从事react项目，在这个项目中，我和我的同事正在使用Material UI，出于某种原因，我想访问DOM node的另一个由{包裹的组件{1}}。我为此使用了反应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} /> 组件I componentDidMount的{​​{1}}内部，如下所示：

enter image description here

我在网上搜索并找到一些Table个问题页面，然后尝试使用console.log(this.header)而不是GitHub，但这对我没有帮助。

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

Answer 1

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

示例：

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

来源（withStyles个文档）：

  

一些实施细节可能会让您感兴趣   的：

     

它添加了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

我知道已经晚了，但是对于其他可能会遇到此问题的人，我也提供了解决方案。材质用户界面具有 RootRef API ，您可以在要获取元素DOM节点的情况下将其用作HOC：

首先导入组件：

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

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