Как использовать @ material-ui / core / useScrollTrigger в Next.js?

Question

Я изучаю документацию Material-UI useScrollTrigger и пытаюсь применить ее к Next, чтобы повторить Elevate App Bar.

https://material -ui.com / компоненты / приложение-бар / # usescrolltrigger-опции-триггер

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 вместо просто реквизитов.

Кроме того, вам нужно будет уничтожать дочерних элементов без реквизита в ElevationScroll:

const { children } = props