validateDOMNesting(...):< button>不能显示为< button>的后代 [英] validateDOMNesting(...): <button> cannot appear as a descendant of <button>

问题描述

我在项目中使用Material-UI，在控制台中收到警告警告:validateDOMNesting(...):不能显示为的后代即使没有直接后代，

i'm using Material-UI in my project, i'm getting a warning in the console Warning: validateDOMNesting(...): cannot appear as a descendant of even though there are no direct descendants,

           <form>
            <TextField
              label="Title"
              value={title}
              onChange={this.handleChange("title")}
              className={classes.formControl}
              margin="normal"
            />
            <br />
            <FormControl className={classes.formControl}>
              <InputLabel>Muscles</InputLabel>
              <Select
                value={muscles}
                onChange={this.handleChange("muscles")}
              >
                {categories.map((category, index) => {
                  return (
                    <MenuItem key="index" value={category}>
                      {category}
                    </MenuItem>
                  );
                })}
              </Select>
            </FormControl>
            <br />
            <TextField
              multiline
              rows={4}
              label="Description"
              value={description}
              onChange={this.handleChange("description")}
              className={classes.formControl}
              margin="normal"
            />
          </form>

这是沙盒链接: https://codesandbox.io/s/react-material-ui-0yqeo

推荐答案

Fab 组件的默认 elementType 是

The default elementType for the Fab component is button. In your App the Fab component is already nested in a Button component hence the error. The Fab component inherits from ButtonBase so you should be able to remove the top level Button component and use onClick directly on it:

<Fab
  color="secondary"
  aria-label="add"
  size="small"
  onClick={this.handleToggle}
>
  <AddIcon />
</Fab>

这篇关于validateDOMNesting(...):< button>不能显示为< button>的后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！