时间戳

首页 > 解决方案 > 用不同的键映射一个 React 组件

reactjs - 用不同的键映射一个 React 组件

问题描述

我想加载组件，但它显示了一个问题，即具有相同键的组件但我映射到 selectedGroups 并将 gr.id 作为它在第一个版本之前工作的键

sharingTabs = selectedGroups.map(gr => (
        <ExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>{gr.name}</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Grid container spacing={16}>
              <Grid item xs>
                <SharingSpacesTabs />
              </Grid>
            </Grid>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      ));

但是后来我想在道具中发送索引，这就是为什么我在地图中添加了另一个地图，这就是导致回调函数问题的原因，我添加了 return

sharingTabs = selectedGroups.map(function(gr) {
        const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element = gr.id)) {
            return index;
          }
        });
        return (
          <ExpansionPanel key={gr.id}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
              <Typography className={classes.heading}>{gr.name}</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Grid container spacing={16}>
                <Grid item xs>
                  <SharingSpacesTabs id={gr.id} index={indexs[0]} />
                </Grid>
              </Grid>
            </ExpansionPanelDetails>
          </ExpansionPanel>
        );
      });

你能帮我找到我需要的解决方案吗，谢谢

标签： reactjsdictionaryecmascript-6

解决方案

我认为您的情况有问题，请更改您的功能条件以正确检查 == 或 === 的相等性。

另外我不确定如果条件不满足你想做什么，map 将为每个不满足条件的元素返回 null。

 const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element == gr.id)) {
            return index;
          }
        });

推荐阅读