我正在使用 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财产button，它不会发出警告。
有没有不警告不使用href财产的好方法？
问题：使用您的代码，您将一个按钮放置在一个禁止按钮中。
来自 Material-UI CardActionArea文档
inheritance
ButtonBase组件的 props也是可用的。您可以利用此行为来定位嵌套组件。
如果您继续浏览ButtonBase文档，您会看到它默认是一个'button'组件。
选项 1：将按钮逻辑移动到CardActionArea并将 的componentprops设置Button为任何不是按钮的东西，例如跨度。这使得整个卡片操作区域都有 onClick 处理程序和响应。
<CardActionArea onClick={handleShow}>
<Button component="span">
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
选项2：保持原样和的分量props设置CardActionArea到其他任何东西比“按钮”。这将只留下带有 onClick 处理程序的按钮，卡片操作区域将注册点击，即涟漪效应，否则将无响应。
<CardActionArea component="span">
<Button onClick={handleShow}>
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
在两个选项 1之间，IMO 是首选选项，因为它使整个行动领域都具有响应性，但这完全基于所呈现的事实，并且您的需求/设计可能不同或更复杂。