javascript - 在这种情况下 'generate' 是什么？

Question

generate() 方法在以下上下文中意味着什么，它是如何工作的？我以前从未见过这个。这是 List 组件的方法，还是属于 React.js 或 JSX 或属于 Javascript 还是属于其他东西？我找不到它的任何文档。

demo.js 文件 in this codesandbox contains the following :

https://codesandbox.io/s/ppmxj46w8x

demo.js，从第 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>

Here are the docs the code sandbox comes from.

有人可以解释一下这个generate() 方法的文档吗？

Answer 1

它正在为传入的元素创建键值对:

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

例如，第 82 行(它只是附加一个 key ):

<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>