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

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

谢谢你!


当前回答

如果在使用Material UI <Typography> https://material-ui.com/api/typography/时发生此错误,那么您可以通过更改<Typography>元素的组件属性值轻松地将<p>更改为<span>:

<Typography component={'span'} variant={'body2'}>

根据排版文档:

component:用于根节点的组件。使用DOM元素或组件的字符串。默认情况下,它将变体映射到一个良好的默认标题组件。

因此Typography选择<p>作为合理的默认值,这是可以更改的。可能会有副作用…为我工作。

其他回答

我解决了这个问题,通过删除我的标签,我用来包装我的2文本字段,导致相同的错误日志。

材质UI !!!!!

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

document.querySelectorAll(" p * div ")

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

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

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

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

在App.js的渲染过程中有一个问题。 不要使用<div>…</div>渲染只需使用<>…</>。

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

错误:

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