4

我正在研究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} />

和组件 I的内部componentDidMount，如下所示：Tableconsole.log(this.header)

在此处输入图像描述

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

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

4

2 回答 2

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

于 2018-11-09T15:26:58.170 回答
0

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

首先导入组件：

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

然后将整个元素包装在一个 RootRef 组件中并创建一个 React ref。但是，不要像这样在组件上添加 ref 并将其引用到 ref ref={this.tableHeadRef}，而应该像这样添加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>
    );
  }
}
于 2019-06-30T12:51:49.680 回答