Material UI Select 组件上的“keepMounted”属性未将菜单项安装到 DOM

Question

我试图确保我的菜单项安装在 DOM 中以用于 SEO 目的。我正在使用 MUI Select 组件作为下拉导航，并传入keepMountedprops，这些 props 最终通过 传播到 Popper 组件上MenuProps。

我可以看到菜单项 HTML (ul > li) 安装在我的检查器中，但当我检查源或 CURL 时它们不存在。

const TopicSelect = ({
  classes,
  width,
  selectClassName,
  topicData,
  selectedValue,
  onChange,
}) => {
  const isMobile = isWidthDown('xs', width)

  return (
    <FormControl data-testid="TopicSelect-formControl" variant="filled">
      <InputLabel className={classes.label} htmlFor="topic-select-input">
        Filter by topic
      </InputLabel>
      <Select
        data-testid="TopicSelect-select"
        className={classnames(classes.select, selectClassName)}
        onChange={onChange}
        value={selectedValue}
        autoWidth
        native={isWidthDown('xs', width) ? true : false}
        input={
          <FilledInput
            name="topic"
            id="topic-select-input"
            className={classes.filledInput}
            disableUnderline
          />
        }
        MenuProps={{
          style: {
            zIndex: 1500,
          },
          keepMounted: true,
        }}
      >
        {isMobile
          ? [
              <option value="" />,
              topicData.map(topic => (
                <option
                  key={`${topic.text}-LearnNav-menuItem`}
                  value={topic.path}
                >
                  {topic.text}
                </option>
              )),
            ]
          : [
              <MenuItem key="none" value="">
                <em>None</em>
              </MenuItem>,
              topicData.map(topic => (
                <MenuItem
                  key={`${topic.text}-LearnNav-menuItem`}
                  value={topic.path}
                >
                  {topic.text}
                </MenuItem>
              )),
            ]}
      </Select>
    </FormControl>
  )
}

我希望菜单项 HTML 能够呈现到 DOM，因为这就是 prop 的目的。不知道为什么它们在 SSR 期间没有渲染。

以前有人遇到过这个问题吗？有没有办法确保我忽略的这些项目已安装？

Answer 1

我看到的关于该keepMounted道具的讨论Menu与可访问性有关，而不是 SEO/SSR（尽管我现在看到关于道具的描述Modal提到了 SEO）。对于辅助功能用例，菜单项渲染的轻微延迟（而不是初始渲染的一部分）不会导致任何问题。

延迟是由于Portal（Menu使用Popover哪个使用Modal哪个使用Portal）通过效果触发其子级的渲染。

我认为解决此问题的唯一方法是利用上的disablePortal 属性（除了keepMounted）Menu/Popover/Modal/Portal。

        <Select
          value={state.age}
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
          MenuProps={{ keepMounted: true, disablePortal: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>

我自己不使用 SSR，也没有在 SSR 环境中测试过这个解决方案，但我相信它应该可以解决问题。

代码资源：

• 选择
• 选择输入
• 菜单
• 弹出窗口
• 莫代尔
• 门户网站