无状态功能组件不能提供给引用。但是我正在尝试将其提供给类组件吗?

时间:2018-09-06 02:55:17

标签: reactjs

我有以下课程:

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"
);

但是,我仍然遇到相同的错误。除了使组件成为基于类的组件之外,还有更高的障碍吗?还是我在这里遗漏了什么?

0 个答案:

没有答案