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

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>
  }
}

谢谢你!


当前回答

(额外) 问题可以是<p>元素内<p>元素中的其他类似错误。

错误:

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

其他回答

如果你正在寻找发生这种情况的地方,在控制台中你可以使用:document。querySelectorAll(" p * div ")

我通过使用材质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>标签。更多细节请参见链接。

当我在React中使用Chakra UI为一些文本做内联样式时,我得到了这个错误。进行内联样式化的正确方法是使用span元素,其他人对其他样式化框架也这么说。正确的代码:

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

我也有类似的问题,把组件包装成“div”而不是“p”,错误就消失了。

我从<Card内使用一个自定义组件得到了这个。在React中<Card>组件的文本>部分。我的组件都不在p标签中