我有以下课程:
class ModelList extends Component {
constructor(props) {
super(props);
this.stickySidebar = React.createRef();
this.state = {
bottomBorder: false
};
}
...
render() {
const {
title,
button,
navHeight,
footerHeight,
children,
...props
} = this.props;
return (
<ModelListWrapper
{...props}
navHeight={navHeight}
footerHeight={footerHeight}
bottomBorder={this.state.bottomBorder}
>
<ModelListHeader>
{title && <H3>{title}</H3>}
{button && <Button {...button} color="link" size="sm" />}
</ModelListHeader>
<SidebarContainerSticky
id="sticky-sidebar-model-list"
ref={this.stickySidebar}
navHeight={navHeight}
footerHeight={footerHeight}
>
{children}
</SidebarContainerSticky>
</ModelListWrapper>
);
}
}
并且我正在尝试将this.stickySidebar
作为参考传递到SidebarContainerSticky
组件中。但是,我得到无状态函数组件不能给refs错误。我已经将曾经是无状态组件的东西重构为类组件,例如:
class SidebarContainerSticky extends Component {
render() {
const { navHeight, footerHeight, ...props } = this.props;
return (
<div
{...props}
data-ut="sidebar-container-sticky"
style={{ height: `calc(100vh - ${navHeight + footerHeight}px)` }}
/>
);
}
}
export default withStyleClassName(
SidebarContainerSticky,
"sidebarContainerStickyClassName"
);
但是,我仍然遇到相同的错误。除了使组件成为基于类的组件之外,还有更高的障碍吗?还是我在这里遗漏了什么?