如何在Next.js中使用@ material-ui / core / useScrollTrigger？

Question

我正在研究文档Material-UI useScrollTrigger并尝试将其应用于Next以重复Elevate App Bar。

https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";

interface Props {
  children: React.ReactElement;
}

function ElevationScroll(props: Props) {
  const children = props;
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0
  });
}

export default class HeaderAppBar {
  render() {
    return (
      <ElevationScroll {...props}>
        <AppBar />
      </ElevationScroll {...props}>
    );
  }
}

但是我得到错误ReferenceError: props is not defined 。 请帮忙解决问题。

Answer 1

HeaderAppBar是一个类组件，因此您需要引用this.props而不仅仅是props。

此外，您还需要在ElevationScroll中使用道具中的破坏性儿童：

const { children } = props