admin管理员组文章数量:1323524
I'm making a website using React.
When my website has lots of text, I'll show a button such as show more or less
.
In my project, It works well, but always show a warning about validateDOMNesting(...): <button>
My sample code like this.
const [show, setShow] = useState(false);
function handleShow() {
show ? setShow(false) : setShow(true);
}
<CardActionArea>
<Button onClick={handleShow}>
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
I think CardActionArea
is a button
ponent, it makes a nested button
now.
But if I declare href
property in button
, it doesn't make a warning.
Is there a good way that doesn't make a warning not using href
property?
I'm making a website using React.
When my website has lots of text, I'll show a button such as show more or less
.
In my project, It works well, but always show a warning about validateDOMNesting(...): <button>
My sample code like this.
const [show, setShow] = useState(false);
function handleShow() {
show ? setShow(false) : setShow(true);
}
<CardActionArea>
<Button onClick={handleShow}>
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
I think CardActionArea
is a button
ponent, it makes a nested button
now.
But if I declare href
property in button
, it doesn't make a warning.
Is there a good way that doesn't make a warning not using href
property?
- Can you recreate the warning in codesandbox.io with a minimal example? – Dennis Vash Commented May 31, 2020 at 6:41
1 Answer
Reset to default 8Issue: With your code you've placed a button within a button which is a no-no.
From the Material-UI CardActionArea docs
Inheritance
The props of the
ButtonBase
ponent are also available. You can take advantage of this behavior to target nested ponents.
And if you cruise on over to the ButtonBase docs you'll see it is by default a 'button'
ponent.
Option 1: Move button logic to CardActionArea
and set the ponent
prop of the Button
to anything not a button, like a span. This makes the entire card action area have the onClick handler and responsive.
<CardActionArea onClick={handleShow}>
<Button ponent="span">
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
Option 2: Keep as-is and set the ponent prop of the CardActionArea
to anything other than 'button'. This will leave only the button with the onClick handler, the card action area will register clicks, i.e. the ripple effect, but will by unresponsive otherwise.
<CardActionArea ponent="span">
<Button onClick={handleShow}>
{ show ? text : text.substr(0, 100) + "..." }
</Button>
</CardActionArea>
Between the two option 1 is, IMO, the preferred option as it makes the entire action area responsive, but this is based entirely on only the facts presented and your needs/design could be different or more plex.
本文标签: javascriptvalidateDOMNesting() ltbuttongt WarningStack Overflow
版权声明:本文标题:javascript - validateDOMNesting(...): <button> Warning - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742133287a2422258.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论