NextJS组件添加div时报TypeError: children.props is undefined求助

Material UI 的Slide过渡组件要求只能传入单个直接子元素，组件内部会读取该子元素的props来注入动画相关的配置。
你修改后在<HideOnScroll>内部同时写了<div>test</div>和<AppBar>两个同级元素，此时HideOnScroll拿到的children是元素数组，数组不存在props属性，因此触发TypeError: children.props is undefined报错。你尝试给div加{...props}无法解决问题，因为报错根源和props传递无关。

将<HideOnScroll>内部的所有元素用一个共同的父容器包裹，再把你需要的顶部装饰条放在父容器内最上方即可，你已经定义好的topTrim样式可以直接复用。

修改后的return代码 #

return (
  <header>
    <HideOnScroll {...props}>   
      {/* 单个父容器包裹所有内容，也可以用<></>（React.Fragment）替代div减少DOM层级 */}
      <div>
        {/* 顶部10px装饰条 */}
        <div className={topTrim}></div>     
        <AppBar className={header}>
          {mobileView ? displayMobile() : displayDesktop()}
        </AppBar>
      </div>
    </HideOnScroll>
  </header>
);

内容的提问来源于stack exchange，提问作者sybercoda