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

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.js的渲染过程中有一个问题。 不要使用<div>…</div>渲染只需使用<>…</>。

其他回答

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

基于警告消息,组件ReactTooltip呈现一个HTML,看起来像这样:

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

根据本文档,<p></p>标签只能包含内联元素。这意味着在其中放置<div></div>标签是不合适的,因为div标签是一个块元素。不恰当的嵌套可能会导致一些小故障,比如呈现额外的标签,这会影响你的javascript和css。

如果您希望消除此警告,您可能需要自定义ReactTooltip组件,或者等待创建者修复此警告。

如果你正在使用ReactTooltip,为了让警告消失,你现在可以添加一个包装器道具,其值为span,如下所示:

<ReactTooltip wrapper="span" />

由于span是一个内联元素,它应该不再报错。

你的组件可以在另一个组件中呈现(例如<Typography>…< /排版>)。因此,它将在<p> ..</p>这是不允许的。

解决办法: 删除<排版>…</Typography>,因为这只用于在<p>…</p>或任何其他文本元素,如标题。

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