小编Vin*_*ent的帖子

我试图让 react datepicker 的日期选择弹出框从材质 UI 菜单项打开。

我已将菜单项设为 react datepicker 输入字段。问题是我的输入字段是选择日期弹出框的锚点，弹出框在我的菜单中打开。我希望弹出窗口在菜单上方打开。

react datepicker 文档没有很多关于 popover 位置的信息。知道如何实现这一目标吗？

这是弹出窗口被“困住”在菜单中的不需要行为的屏幕截图

我的菜单代码的快速概览：

// this icon is the anchor for the menu
<MoreIcon onClick={handleClick} />
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  //this is my Date picker component
  <Reschedule handleReschedule={handleReschedule} />
</Menu>

和我的日期选择器组件（使用自定义输入字段作为菜单项）：

export const Reschedule = ({ handleReschedule }) => {
  // ref to the datePicker to control open/close
  const calendar = createRef();

  //to Open the date picker
  const openDatepicker = (e) => {
    calendar.current.setOpen(true); …

我正在使用 Gatsby 和 Netlify CMS 构建一个静态网站。该网站也托管在 Netlify 上。我有一个博客部分，我从 Markdown 文件中为每篇文章生成一个页面。对于我生成的每个文章页面，在构建“查询时间太长”期间，我都会收到以下警告。网站最终会构建，但生成的页面越多，构建时间就会变得越来越长，所以我担心当我的网站中开始有太多文章时，构建时间会变得太长。

我正在为 netlify CMS 创建的每个 markdown 文件生成一个页面。

您介意查看我在 gatsby-node 文件中的代码以及我在博客模板文件中使用的查询，看看我是否做错了什么可以解释构建时间警告消息的事情吗？

谢谢

这是我的开发环境

  npmPackages:
    gatsby: ^2.26.1 => 2.26.1
    gatsby-image: ^2.10.0 => 2.10.0
    gatsby-plugin-netlify-cms: ^4.8.0 => 4.8.0
    gatsby-plugin-react-helmet: ^3.8.0 => 3.8.0
    gatsby-plugin-sharp: ^2.13.0 => 2.13.0
    gatsby-plugin-styled-components: ^3.9.0 => 3.9.0
    gatsby-remark-images: ^3.10.0 => 3.10.0
    gatsby-remark-prismjs: ^3.12.0 => 3.12.0
    gatsby-source-filesystem: ^2.9.1 => 2.9.1
    gatsby-transformer-remark: ^2.15.0 => 2.15.0
    gatsby-transformer-sharp: ^2.11.0 => 2.11.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0

这是我在 gatsby-node 文件中生成帖子页面的代码

exports.createPages = async ({ actions, graphql, reporter }) …