javascript - 验证 DOM 嵌套 (...) : Warning

Question

我正在使用 React 制作一个网站。

当我的网站有很多文字时，我会显示一个按钮，例如 show more or less .

在我的项目中，它运行良好，但总是显示关于 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属性(property) button ，它不会发出警告。

有没有不使用href不发出警告的好方法？属性(property)？

Answer 1

问题:在您的代码中，您将一个按钮放在一个按钮中，这是一个禁忌。

来自 Material-UI CardActionArea docs

Inheritance

The props of the ButtonBase component are also available. You can take advantage of this behavior to target nested components.

如果你继续航行到 ButtonBase文档你会看到它默认是一个 'button' 组件。

选项 1: 将按钮逻辑移动到 CardActionArea 并将 Button 的 component 属性设置为任何值 < em>不是按钮，就像一个跨度。这使得整个卡片操作区域具有 onClick 处理程序和响应。

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

选项 2:保持原样并将 CardActionArea 的组件属性设置为“按钮”以外的任何其他。这将仅带有 onClick 处理程序的按钮，卡片操作区域将记录点击，即涟漪效应，但否则将无响应。

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

在这两个选项 1 之间，IMO 是首选选项，因为它使整个操作区域响应，但这完全基于仅提供的事实，您的需求/设计可能不同或更复杂。