reactjs - has - <div> no puede aparecer como descendiente de<p>

html to jsx

Question

Estoy viendo esto. No es un misterio de lo que se queja:

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

Soy el autor de SomeComponent y SomeComponent . Pero el ú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 de que es "un 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 me gustaría cambiar esto de todos modos (siempre que no quiera volver a implementar una dependencia externa)? ¿Hay tal vez un diseño mejor que todavía no conozco?

Para completar, aquí está la implementación de SomeOtherComponent . Simplemente presenta this.props.value , y cuando se this.props.value : una información sobre herramientas que dice "Algunos mensajes 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.

Answer 1

Es posible que su componente esté renderizado dentro de otro componente (como una <Typography> ... </Typography> ). Por lo tanto, cargará su componente dentro de un <p> .. </p> que no está permitido.

Solución: Eliminar porque solo se usa para texto sin formato dentro de una

o cualquier otro elemento de texto como encabezados.

Answer 2

Según el mensaje de advertencia, el componente ReactTooltip presenta un HTML que podría tener este aspecto:

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

Según este document , una etiqueta <p></p> solo puede contener elementos en línea. Eso significa que poner una <div></div> dentro de ella debería ser impropio, ya que la etiqueta div es un elemento de bloque. El anidamiento incorrecto podría causar fallas, como la representación de etiquetas adicionales , que pueden afectar a su javascript y css.

Si desea deshacerse de esta advertencia, puede personalizar el componente ReactTooltip o esperar a que el creador corrija esta advertencia.

Answer 3

Si se produce este error al utilizar Material UI <Typography> https://material-ui.com/api/typography/ , puede cambiar fácilmente <p> a <span> cambiando el valor del atributo de component del Elemento <Typography> :

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

Según los documentos de tipografía:

componente: el componente utilizado para el nodo raíz. Una cadena para usar un elemento DOM o un componente. De forma predeterminada, asigna la variante a un buen componente de titular predeterminado.

Así que la tipografía está seleccionando <p> como un valor predeterminado razonable, que puede cambiar. Puede venir con efectos secundarios ... funcionó para mí.

Answer 4

Tuve un problema similar y envolví el componente en "div" en lugar de "p" y el error desapareció.