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

【问题标题】：How to use @material-ui/core/useScrollTrigger in Next.js?如何在 Next.js 中使用 @material-ui/core/useScrollTrigger？
【发布时间】：2019-10-13 09:43:41
【问题描述】：

我正在研究文档 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。请帮忙解决问题。

【问题讨论】：

标签： javascript reactjs typescript material-ui next.js

【解决方案1】：

HeaderAppBar是一个类组件，所以需要引用this.props而不是props。

此外，您还需要从 ElevationScroll 中的 props 中解构子项：

const { children } = props

【讨论】：