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

谢谢你！

当前回答

I got this from using a react-boostrap <Card.Text> section of a component in React. None of my components were in p tags. <Card.Text> by default shows up as a in the HTML tree once rendered and basically having a custom React component returning its jsx elements within a <div> it causes a <p><div>...</div></p> which is a bad HTML. So to fix this issue if one is using <Card.Text> you can basically use the 'as' attribute as the following <Card.Text as='div'> and this will resolve the warning because it allow a tree such as <div><div></div></div>

2021-04-29 16:07:47

其他回答

如果在使用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

警告出现只是因为演示代码有:

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>  // <==NOTE P TAG HERE
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

像这样修改它就可以了:

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Container>
                    <Box>   // <== P TAG REMOVED
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}

2020-07-23 20:14:14

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

2018-04-29 14:32:01

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

2020-05-08 03:21:53

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

2022-02-03 20:49:44

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

推荐文章

最新文章

标签