Что в этом контексте означает «генерировать»?

Что означает метод generate() в следующем контексте и как он работает? Я такого раньше не видел. Является ли это методом компонента List, или он принадлежит React.js или JSX, или он принадлежит Javascript, или он принадлежит чему-то еще? Мне не удалось найти для этого документацию.

Файл demo.js в этом поле кодов содержатся следующие:

https://codesandbox.io/s/ppmxj46w8x

demo.js, beginning on line 115

      <Grid item xs = {12} md = {6}>
        <Typography variant = "h6" className = {classes.title}>
          Avatar with text
        </Typography>
        <div className = {classes.demo}>
          <List dense = {dense}>
            {generate(  // <-- what is this?
              <ListItem>
                <ListItemAvatar>
                  <Avatar>
                    <FolderIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary = "Single-line item"
                  secondary = {secondary ? 'Secondary text' : null}
                />
              </ListItem>,
            )}
          </List>
        </div>
      </Grid>

Вот документы, из которых берется песочница кода.

Не мог бы кто-нибудь объяснить и указать мне на некоторую документацию для этого метода generate().

Если я правильно понял, это не имеет прямого отношения к React. Это просто определенная пользователем функция, ожидающая в качестве аргумента элемент React.

— 19.11.2018 18:49

Посмотрите на верхнюю часть файла demo.js (строка 33). Это определено там. Это всего лишь небольшой вспомогательный метод для создания нескольких элементов для этого конкретного примера. Не является частью react или material-ui ни в какой форме.

— 19.11.2018 18:52

javascript reactjs

19.11.2018 18:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Он создает пары ключ-значение для переданного элемента:

function generate(element) {
  return [0, 1, 2].map(value =>
    React.cloneElement(element, {
      key: value, // value = 0, 1, 2
    }),
  );
}

Например, строка 82 (это просто добавление ключа):

<ListItem key = {value}>
  <ListItemText
    primary = "Single-line item"
    secondary = {secondary ? 'Secondary text' : null}
  />
</ListItem>

Что означает:

<ListItem key = {0}>
  <ListItemText
    primary = "Single-line item"
    secondary = {secondary ? 'Secondary text' : null}
  />
</ListItem>
<ListItem key = {1}>
  <ListItemText
    primary = "Single-line item"
    secondary = {secondary ? 'Secondary text' : null}
  />
</ListItem>
<ListItem key = {2}>
  <ListItemText
    primary = "Single-line item"
    secondary = {secondary ? 'Secondary text' : null}
  />
</ListItem>

19.11.2018 18:49

Другие вопросы по теме

Неизменяемое нарушение: для этого навигатора отсутствует опора навигации. В React-Navigation 3

Определение метода класса javascript как константы

React setState не перезаписывает объект

Как отслеживать хуки React?

React js скачать файл по частям

Значение href в элементе DOM отличается от значения в компоненте React

Window.addEventListener не обновляет состояние при изменении маршрута, когда scrollY не равно 0

Компонент React открывает все дочерние состояния

Как изменить ширину кнопки входа в facebook в Интернете?

Переопределение значения const

Что в этом контексте означает «генерировать»?

Ответы 1

Другие вопросы по теме

Похожие вопросы