在这种情况下，什么是“生成”？

让我思考一下

该generate()方法在以下情况下意味着什么，以及它如何工作？我以前从未见过。这是List组件的一种方法，还是属于React.js或JSX，或者属于Javascript还是属于其他内容？我还没有找到任何文档。

此codeandbox中的demo.js文件包含以下内容：

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>

这是代码沙箱来自的文档。

有人可以解释一下，并向我指出有关此generate()方法的一些文档。

马特·卡洛塔

它为传入的元素创建键值对：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。