свойство keepMounting в пользовательском интерфейсе материалов. Выберите компонент, не монтирующий элементы меню в DOM. - PullRequest
Новая
       55

свойство keepMounting в пользовательском интерфейсе материалов. Выберите компонент, не монтирующий элементы меню в DOM.

1 голос
/ 08 октября 2019

Я пытаюсь убедиться, что мои пункты меню смонтированы в DOM для целей SEO. Я использую компонент MUI Select для выпадающего меню и передаю keepMounted реквизиты, которые в конечном итоге распространяются на компонент 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, потому что это то, для чего предназначен этот объект. Не уверен, почему они не отображаются во время SSR.

Кто-нибудь сталкивался с этой проблемой раньше? Есть ли способ убедиться, что эти элементы смонтированы, и я их пропускаю?

1 Ответ

0 голосов
/ 09 октября 2019

Обсуждения, которые я видел относительно keepMounted реквизита на Menu, были связаны с доступностью, а не с SEO / SSR (хотя теперь я вижу, что в описании реквизита на Modal упоминается SEO). В случаях использования специальных возможностей небольшая задержка при отображении элементов меню (а не при первоначальном отображении) не вызовет каких-либо проблем.

Задержка вызвана Portal (Menuиспользует Popover, который использует Modal, который использует Portal) , запускающий рендеринг своих дочерних элементов с помощью эффекта .

Единственный способ обойти это - использовать 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>

Edit Select menu items on initial render

Я не используюСам SSR и не тестировал это решение в среде SSR, но я считаю, что оно должно сработать.

Ресурсы кода:

...