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?

• javascript
• reactjs

Share Improve this question Follow edited Oct 4, 2021 at 17:23 Audwin Oyong 2,53133 gold badges1919 silver badges3636 bronze badges asked May 31, 2020 at 5:47 mimicmimic 9511 silver badge77 bronze badges 1

• Can you recreate the warning in codesandbox.io with a minimal example? – Dennis Vash Commented May 31, 2020 at 6:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Issue: 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