反应：map函数内的if语句

Question

我为此付出了一段时间，我正在构建一个页面，以便用户可以动态创建表单。我有一个React组件可以创建表单，而另一个可以呈现表单，我目前正面临编辑方面的问题已经创建的表格。

mat-button-toggle {
  flex-grow: 1; /* widen visible area */
}
mat-button-toggle ::ng-deep .mat-button-toggle-label-content {
  width: stretch; /* widen clickable area */
}
mat-button-toggle-group  {
  width: 100%;
}
.my-highlight {
  color: red;
}

这是呈现代码的组件，它具有一些if语句，这些语句检查创建的表单的属性并相应地呈现它。

这是标题部分：

const GigApplicationRenderer = (props) => {
  const {
    questions,
    onSelectDelete,
    onSelectEdit,
    classes,
    theme,
    handleClickOpen,
    handleClose,
    open
  } = props;
  return (
    <Fragment>
      {questions.map((element, index) => (
        <div className={classes.li} key={element.title}>
          <Grid container spacing={24}>
            <Grid item xs={12}>
              {element.type === 'input' ? (
                <Paper index={index} className={classes.paper}>
                  <Title
                    onSelectEdit={onSelectEdit}
                    onSelectDelete={onSelectDelete}
                    element={element}
                    handleClose={handleClose}
                    open={open}
                  />
                  <TextField
                    className={classes.textField}
                    value=""
                    label="answer text"
                    margin="normal"
                  />
                </Paper>
              ) : element.type === 'radiobox' ? (
                <Paper className={classes.paper}>
                  <Title
                    onSelectEdit={onSelectEdit}
                    onSelectDelete={onSelectDelete}
                    element={element}
                    handleClose={handleClose}
                    open={open}
                  />
                  {element.options.map(option => (
                    <ListItem key={option} className={classes.itemsList}>
                      <RadioGroup>
                        <FormControlLabel
                          label={option}
                          value={option}
                          control={<Radio color="primary" />}
                        />
                      </RadioGroup>
                    </ListItem>
                  ))}
                </Paper>
              ) : element.type === 'checkbox' ? (
                <Paper className={classes.paper}>
                  <Title
                    onSelectEdit={onSelectEdit}
                    onSelectDelete={onSelectDelete}
                    element={element}
                    handleClose={handleClose}
                    open={open}
                  />
                  {element.options.map(option => (
                    <ListItem key={option} className={classes.itemsList}>
                      <FormControlLabel
                        label={option}
                        value={option}
                        control={<Checkbox checked={false} color="primary" />}
                      />
                    </ListItem>
                  ))}
                  <Divider light />
                </Paper>
              ) : null}
            </Grid>
          </Grid>
        </div>
      ))}
    </Fragment>
  );
};

我希望它打开一个单击了元素值的对话框，以便用户可以对其进行编辑，问题是，无论单击哪个按钮，在对话框上，它始终呈现表单的最后一个元素。

尽管在功能const Title = (props) => { const { element, onSelectDelete, onSelectEdit, index, handleClose, open } = props; return ( <Grid container spacing={24}> {console.log(element.title)} <Grid item xs={12} sm={9}> <Typography style={{ textAlign: 'left' }} variant="subheading" gutterBottom> {element.title} </Typography> </Grid> <Grid item xs={12} sm={3}> <Tooltip enterDelay={100} leaveDelay={100} placement="bottom" title="Edit"> <IconButton onClick={onSelectEdit(element, index)} aria-label="Edit"> <EditIcon /> </IconButton> </Tooltip> <Tooltip enterDelay={100} leaveDelay={100} placement="bottom" title="Delete"> <IconButton aria-label="Delete"> <DeleteIcon onClick={onSelectDelete(element)} /> </IconButton> </Tooltip> </Grid> <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title"> <DialogTitle id="form-dialog-title"> blabla </DialogTitle> <DialogContent> <DialogContentText> To subscribe to this website, please enter your email address here. We will send updates occasionally. </DialogContentText> <TextField autoFocus // value={element.title} margin="dense" label="question title" fullWidth /> </DialogContent> <DialogActions> <Button onClick={handleClose} color="primary"> Cancel </Button> <Button onClick={handleClose} color="primary"> Save </Button> </DialogActions> </Dialog> </Grid> ); }; 上，我得到了正确的元素，我认为这是由于第一个组件的if语句而发生的。

问题数组如下：

onSelectEdit

有没有办法在对话框打开时呈现正确的元素？

我也欢迎任何有关如何完成此操作的建议。