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

Question

为了 SEO 目的，我试图确保将我的菜单项安装在 DOM 中。我将 MUI Select 组件用于下拉导航并传入 keepMounted Prop ，这些 Prop 最终通过 MenuProps 分布在 Popper 组件上。

我可以看到菜单项 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

我看到的关于 Menu 上的 keepMounted Prop 的讨论与可访问性有关，而不是 SEO/SSR(尽管我现在看到 上的 Prop 描述>Modal 提到 SEO)。对于可访问性用例，菜单项呈现的轻微延迟(而不是初始呈现的一部分)不会导致任何问题。

延迟是由于 Portal(Menu 使用 Popover 而 Modal 使用 Portal ) triggering the rendering of its children via an effect .

我认为解决此问题的唯一方法是利用 disablePortal prop (除了 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 环境中测试过这个解决方案，但我相信它应该可以解决问题。

代码资源:

• Select
• SelectInput
• Menu
• Popover
• Modal
• Portal