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

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

谢谢你!


当前回答

如果你不能解决问题,就用底部方法 你会有这个问题,因为你在文本标签中打开网格标签或div,它可能是假的。 例如,我写的部分代码有问题。看看它:

       <Typography>
         text
            <Grid>

            </Grid>
        </Typography>

小心我在版式标签中打开网格标签。因此,如果我们在typography标签中使用Open Grid标签,则为假。 据我所知,当我们在排印标签中打开时,我们偏离了MUI标准。 所以为了最好的方式,你可以使用以下代码:

  <Grid>
       <Typography>
             text
       </Typography>
   </Grid>

如果你使用这个代码,你不会有任何问题。 因此,如果你再次有问题 你必须检查组件和 查看在哪个组件中没有选择正确的模式。 你应该检查:

跨度字体h1 h2 h3 h4 h5 h6 p

希望我能帮到你。

其他回答

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

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

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

材质UI !!!!!

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

document.querySelectorAll(" p * div ")

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

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

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

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

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