reactjs - <div>不能显示为<p>的后代

我看到了它抱怨的不是什么神秘的事情:

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

我是SomeComponent和SomeOtherComponent的作者。但是后者正在使用外部依赖项( ReactTooltip 中的react-tooltip)。这可能不是一个外部依赖关系，但这不是必须的，但是它让我在这里尝试说“是某些不受我控制的代码”。

考虑到嵌套组件运行正常(貌似)，我应该为这个警告担心多少？而且无论如何我将如何进行更改(前提是我不想重新实现外部依赖项)？是否有我尚未意识到的更好的设计？

为了完整起见，这是SomeOtherComponent的实现。它只是呈现this.props.value，并且在悬停时:提示“Some tooltip message”的工具提示:

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/时发生此错误，则可以通过更改<p>元素的<span>属性的值来轻松地将component更改为<Typography>:

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

根据排版文档:



因此，Typography选择<p>作为明智的默认值，您可以更改它。可能会有副作用...对我有用。

关于reactjs - <div>不能显示为<p>的后代，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41928567/