我正在从事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}}内部，如下所示：
我在网上搜索并找到一些Table个问题页面，然后尝试使用console.log(this.header)而不是GitHub，但这对我没有帮助。
如何访问DOM节点以计算其高度？
答案 0 :(得分：1)
您要寻找的是innerRef属性。只需将ref替换为innerRef。
示例：
<TableHead innerRef={(header) => { this.header = header; }} head={head} />
withStyles个文档）：一些实施细节可能会让您感兴趣 的：
它添加了classes属性，因此您可以覆盖注入的类 外面的名字。
它将添加一个innerRef属性，以便您可以获取对包装组件的引用。 innerRef的用法与ref相同。
它转发非React静态属性，因此此HOC更 “透明”。例如，它可以用来定义一个 getInitialProps（）静态方法（next.js）。
答案 1 :(得分：0)
我知道已经晚了，但是对于其他可能会遇到此问题的人，我也提供了解决方案。材质用户界面具有 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>
);
}
}