我看到了这个。它在抱怨什么并不神秘:

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

我是SomeComponent和SomeOtherComponent的作者。但后者使用了外部依赖项(来自react-tooltip的ReactTooltip)。这可能并不一定是一个外部依赖,但它让我尝试在这里讨论它是“一些超出我控制的代码”。

鉴于嵌套组件工作正常(看起来),我应该对这个警告有多担心呢?无论如何,我该如何改变它(如果我不想重新实现一个外部依赖)?有没有我还不知道的更好的设计?

为了完整起见,下面是SomeOtherComponent的实现。它只是渲染this。props。值,当鼠标悬停时:显示“一些工具提示消息”:

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

谢谢你!


当前回答

这是浏览器的限制。你应该在App的渲染方法中使用div或article之类的东西因为这样你就可以在里面放任何你喜欢的东西。段落标记被限制为只包含一组有限的标记(主要是用于格式化文本的标记)。段落中不能有div

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

不是有效的HTML。根据规范中列出的标记省略规则,<p>标记由<div>标记自动关闭,这使得</p>标记没有匹配的<p>。浏览器可以通过在<div>之后添加一个打开的<p>标签来尝试纠正它:

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

您不能将<div>放在<p>中,并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML,它们将表现得更好。

你可以把<div>放在<div>里面,所以如果你把<p>替换为<div class="p">并适当地设置样式,你就可以得到你想要的。


详细信息(以及一些关于警告的HTML理论):<div>不能作为<p>消息的后代显示,因为<p>标签的允许内容是根据Phrasing Context设置的标准,其中不包括<div>标签。更多细节请参见链接。

其他回答

材质UI !!!!!

我花了大量的时间,但感谢Alex C的回答——>,它给出了一个非常简单而聪明的解决方案

document.querySelectorAll(" p * div ")

所以让我惊讶的是,导致这个问题的是Material UI DialogContentText组件DialogContentText API

所以只需使用component={'span'}来解决这个问题(它不会影响样式)

 <DialogContentText id="alert-dialog-inputs" component={'span'}/>

我通过使用材质UI组件得到了这个警告,然后我测试了component="div"作为下面代码的道具,一切都变得正确:

import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

<Typography component="span">
  <Grid component="span">
    Lorem Ipsum
  </Grid>
</Typography>

实际上,这个警告发生了,因为在Material UI中,Grid组件的默认HTML标签是div标签,默认Typography HTML标签是p标签,所以现在警告发生了,

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>

详细信息(以及一些关于警告的HTML理论):<div>不能作为<p>消息的后代显示,因为<p>标签的允许内容是根据Phrasing Context设置的标准,其中不包括<div>标签。更多细节请参见链接。

我有同样的问题与反应引导和亚历克斯C的解决方案,我发现我使用<div>在<卡。文本>,有点<p>

<Card.Text>
     <div>{name}</div>
     <div>{address}</div>
     <div>{size}</div>
</Card.Text>

这是浏览器的限制。你应该在App的渲染方法中使用div或article之类的东西因为这样你就可以在里面放任何你喜欢的东西。段落标记被限制为只包含一组有限的标记(主要是用于格式化文本的标记)。段落中不能有div

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

不是有效的HTML。根据规范中列出的标记省略规则,<p>标记由<div>标记自动关闭,这使得</p>标记没有匹配的<p>。浏览器可以通过在<div>之后添加一个打开的<p>标签来尝试纠正它:

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

您不能将<div>放在<p>中,并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML,它们将表现得更好。

你可以把<div>放在<div>里面,所以如果你把<p>替换为<div class="p">并适当地设置样式,你就可以得到你想要的。


详细信息(以及一些关于警告的HTML理论):<div>不能作为<p>消息的后代显示,因为<p>标签的允许内容是根据Phrasing Context设置的标准,其中不包括<div>标签。更多细节请参见链接。

I got this from using a react-boostrap <Card.Text> section of a component in React. None of my components were in p tags. <Card.Text> by default shows up as a in the HTML tree once rendered and basically having a custom React component returning its jsx elements within a <div> it causes a <p><div>...</div></p> which is a bad HTML. So to fix this issue if one is using <Card.Text> you can basically use the 'as' attribute as the following <Card.Text as='div'> and this will resolve the warning because it allow a tree such as <div><div></div></div>