validateDOMNesting(...): <button> 警告

Question

validateDOMNesting(...): <button> 警告

javascriptreactjs

3

我正在使用React制作网站。

当我的网站有很多文本时，我会显示一个按钮，例如“显示更多或更少”。

在我的项目中，它运行良好，但总是显示一个关于validateDOMNesting(...): <button>的警告。

我示例代码如下。

const [show, setShow] = useState(false);

function handleShow() {
  show ? setShow(false) : setShow(true);
}

<CardActionArea>
  <Button onClick={handleShow}> 
    { show ? text : text.substr(0, 100) + "..." }
  </Button>
</CardActionArea>

我认为CardActionArea是一个按钮组件，它现在嵌套了一个button。

但如果我在button中声明href属性，它不会产生警告。

有没有一种好的方式，在不使用href属性的情况下不会产生警告？

- mimic

你能否用最简单的例子在codesandbox.io中重新创建警告？ - Dennis Vash

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew Reese · Accepted Answer

问题：您的代码将一个按钮放在另一个按钮中，这是不允许的。

从 Material-UI CardActionArea 文档中可以看到：

继承

ButtonBase 组件的属性也是可用的。您可以利用这种行为来定位嵌套组件。

如果您转到 ButtonBase 文档，您会看到它默认是一个 'button' 组件。

选项 1：将按钮逻辑移到 CardActionArea 中，并将 Button 的 component 属性设置为任何非按钮元素，如 span 元素。这使得整个卡片操作区域都具有 onClick 处理程序和响应式。

<CardActionArea onClick={handleShow}>
  <Button component="span"> 
    { show ? text : text.substr(0, 100) + "..." }
  </Button>
</CardActionArea>

选项 2：保持原样并将 CardActionArea 组件的属性设置为除 'button' 之外的任何其他 值。这将仅保留带有 onClick 处理程序的按钮，卡操作区域将注册单击，即涟漪效果，但否则将不起作用。

<CardActionArea component="span">
  <Button onClick={handleShow}> 
    { show ? text : text.substr(0, 100) + "..." }
  </Button>
</CardActionArea>

在两个选项中，我认为选项1更好，因为它使整个动作区域具有响应性，但这完全基于所呈现的事实和你的需求/设计可能不同或更复杂。