Estoy viendo esto. No es un misterio de qué se queja:
Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div. Soy el autor de SomeComponent y SomeOtherComponent . Pero este último está usando una dependencia externa ( ReactTooltip de react-tooltip ). Probablemente no sea esencial que se trate de una dependencia externa, pero me permite probar el argumento aquí de que es "algún código que está fuera de mi control".
¿Qué tan preocupado debería estar por esta advertencia, dado que el componente anidado funciona bien (aparentemente)? ¿Y cómo haría para cambiar esto de todos modos (siempre que no quiera volver a implementar una dependencia externa)? ¿Hay tal vez un mejor diseño que aún desconozco?
Para completar, aquí está la implementación de SomeOtherComponent . Simplemente representa this.props.value , y cuando se desplaza: una información sobre herramientas que dice "Algún mensaje de información sobre herramientas":
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> } }Gracias.
Si este error ocurre al usar Material UI <Typography> https://material-ui.com/api/typography/ , entonces puede cambiar fácilmente <p> a <span> cambiando el valor del atributo del component del Elemento <Typography> :
<Typography component={'span'} variant={'body2'}>De acuerdo con los documentos de tipografía:
componente: el componente utilizado para el nodo raíz. O una cadena para usar un elemento DOM o un componente. De forma predeterminada, asigna la variante a un buen componente de título predeterminado.
Entonces, Typography está eligiendo <p> como un valor predeterminado sensato, que puede cambiar. Puede venir con efectos secundarios... funcionó para mí.
Según el mensaje de advertencia, el componente ReactTooltip muestra un HTML que podría verse así:
<p> <div>...</div> </p> Según este documento , una etiqueta <p></p> solo puede contener elementos en línea. Eso significa que poner una <div></div> dentro debería ser incorrecto, ya que la etiqueta div es un elemento de bloque. El anidamiento inadecuado puede causar fallas como renderizar etiquetas adicionales , lo que puede afectar su javascript y css.
Si desea deshacerse de esta advertencia, es posible que desee personalizar el componente ReactTooltip o esperar a que el creador corrija esta advertencia.
Si está buscando dónde sucede esto, en la consola puede usar: document.querySelectorAll(" p * div ")