React获取父元素id的方法

Question

我正在使用 react with typescript。我从后端 API 获取一些数据，然后使用 map 函数渲染数据。地图功能是 return 我有两个按钮的卡片，我想根据我在地图功能上提供的 key 执行一些操作。

作为两个按钮之一，有一个删除按钮，将卡片的id发送到服务器进行删除。

              {items &&
              items.map((data) => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={data.Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {data.name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
// Here I want to get the key that I provided to the Grid element
                          onClick={handleClickOpen}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}

获得该密钥的最佳方法是什么？

Answer 1

因为 map 函数有效 returns 当前迭代的所有数据 items 您可以随时在该函数中访问传递给键的值。假设您想处理 handleClickOpen 中的键值，您可以将该值作为方法参数传递。

您可能还想向 onClick 传递一个函数，否则您将运行在组件呈现后立即进入 handleClickOpen，而不是在用户单击按钮时。

最后，这只是一种风格选择，但您也可以 destructure the values 项目中的数据

             {items &&
              items.map({Id, name} => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
                          onClick={() => (handleClickOpen(Id))}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}

React获取父元素id的方法

how to get parent element id in React

typescript

reactjs