时间戳

首页 > 解决方案 > Material-ui Google Maps Place 组件放置在我的自定义函数中时不保留文本

reactjs - Material-ui Google Maps Place 组件放置在我的自定义函数中时不保留文本

问题描述

React/NextJS/Material-UI 新手问题，希望有人能分享一些见解。我正在使用 Material-ui Google Maps Place 组件（https://material-ui.com/components/autocomplete/#google-maps-place）开箱即用，没有自定义。但是由于某种原因，当包裹在我的自定义函数 HideOnScroll 中时它不起作用，如下所示，它只是隐藏了我的标题 onScroll。它将呈现和获取 Google 位置，但它只接受一个字符，然后在键入第二个字符时立即返回 null/原始状态。但是在这个 HideOnScroll 函数之外它可以完美地工作。知道我做错了什么吗？我的猜测是这是一个州问题，但我不清楚如何解决它。

我的自定义功能：

const HideOnScroll = (props) => {
        const { children } = props;
        const trigger = useScrollTrigger();
        return (
          <Slide appear={false} direction="down" in={!trigger}>
            {children}
          </Slide>
        );
      }

这有效：

return (
    <header>     
        <AppBar className={header}>
          <div className={topTrim}></div>
          {mobileView ? displayMobile() : displayDesktop()}  
          <div>{GoogleMaps()}</div>         
        </AppBar>           
    </header>
  );

这不起作用：

return (
    <header>
      <HideOnScroll {...props}>
        <AppBar className={header}>
          <div className={topTrim}></div>
          {mobileView ? displayMobile() : displayDesktop()}
          <div>{GoogleMaps()}</div>
        </AppBar>
      </HideOnScroll>      
    </header>
  );

仅供参考， displayDesktop() 函数在下面，我目前只是想让它在桌面上工作。我也尝试将 {GoogleMaps()} 添加到此函数中，但仍然遇到同样的问题。

const displayDesktop = () => {
    return (      
      <Toolbar className={toolbar}>        
        <div className={toolBarTop}>{logo()}</div>                     
      </Toolbar>      
    );
  };

标签： reactjsmaterial-uinext.js

解决方案

GoogleMaps是一个 React 函数式组件，不能将其视为普通函数。由于它在 JS 中像普通函数一样被调用，因此它不再保留其作为组件的属性，并失去其状态和生命周期方法。（这意味着你的钩子也会停止工作）

要解决此问题，请考虑使用尖括号语法调用功能组件，即<GoogleMaps/>.

此外，按照惯例，所有用户定义组件的名称都应以大写字母开头，以将它们与常规/预定义组件区分开来。

本文详细处理了这个确切的问题。

推荐阅读