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

Question

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

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 是一个 class 组件，因此您需要参考 this.props 而不仅仅是 props。

此外，您需要在 ElevationScroll 中解构子项的道具：

const { children } = props

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

How to use @material-ui/core/useScrollTrigger in Next.js?

javascript

typescript

reactjs

material-ui

next.js