validateDOMNesting(...): <button> 不能作为 <button> 的后代出现。

Question

我在项目中使用了 Material-UI，控制台会收到一个警告:

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

尽管没有直接的后代，

<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

- Nag

---

这个回答解决了你的问题吗？验证DOM嵌套警告React - Jay

Answer 1

Fab 组件的默认 elementType 是 button。在您的应用中，Fab 组件已经嵌套在一个 Button 组件中，因此出现了错误。 Fab 组件继承自 ButtonBase，因此您应该能够删除顶层的 Button 组件并直接使用 onClick：

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

- Samuel Vaillant

Answer 2

如果按钮有一个子按钮，那么我们会收到这个错误。如果父组件有按钮属性，请删除子按钮。

- vinay kumar