<div>不能作为<p>的后代出现

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

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

谢谢你！

当前回答

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

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

2022-06-24 16:30:38

其他回答

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

2020-02-24 11:20:39

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

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

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

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

2017-01-30 03:28:56

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

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

根据排版文档:

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

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

2018-11-27 07:37:47

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

错误:

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

2022-10-10 08:18:12

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

       <Typography>
         text
            <Grid>

            </Grid>
        </Typography>

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

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

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

跨度字体h1 h2 h3 h4 h5 h6 p

希望我能帮到你。

2022-12-31 20:46:02

<div>不能作为<p>的后代出现

推荐文章

最新文章

标签