cannot appear as a descendant of

Question

I\'m seeing this. It\'s not a mystery what it is complaining about:

Warning: validateDOMnesting(...): 
 cannot appear as a descendant of 
. See         


        
                      

              相关标签:
       
      

Answer 1

I had a similar issue and wrapped the component in "div" instead of "p" and the error went away.

Answer 2

I got this error when using Chakra UI in React when doing inline styling for some text. The correct way to do the inline styling was using the span element, as others also said for other styling frameworks. The correct code:

<Text as="span" fontWeight="bold">
    Bold text
    <Text display="inline" fontWeight="normal">normal inline text</Text>
</Text>

Answer 3

This is a constraint of browsers. You should use div or article or something like that in the render method of App because that way you can put whatever you like inside it. Paragraph tags are limited to only containing a limited set of tags (mostly tags for formatting text. You cannot have a div inside a paragraph

<p><div></div></p>

is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

<p></p><div></div><p></p>

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Answer 4

I got this from using a custom component inside a <Card.Text> section of a <Card> component in React. None of my components were in p tags

Answer 5

If you're looking for where this is happening, in console you can use: document.querySelectorAll(" p * div ")

Answer 6

Your component might be rendered inside another component (such as a <Typography> ... </Typography>). Therefore, it will load your component inside a <p> .. </p> which is not allowed.

Fix: Remove <Typography>...</Typography> because this is only used for plain text inside a <p>...</p> or any other text element such as headings.