Recibo la siguiente advertencia al renderizar mi componente:
Advertencia: un componente es
contentEditablepor contenido y contiene elementoschildrenadministrados por React. Ahora es su responsabilidad garantizar que ninguno de esos nodos se modifique o duplique inesperadamente. Esto probablemente no sea intencional.
Este es mi componente:
import React, { Component } from "react"; export default class Editable extends Component { render() { return ( <div contentEditable={true} onBlur={this.props.handleBlur}> {this.props.children} </div> ); } }¿Cuál es el problema potencial con mi código del que React quiere advertirme? No entendí bien al leer la documentación en https://reactjs.org/docs/dom-elements.html .
Me imagino que mi componente debería funcionar exactamente como un campo de entrada administrado, sin ningún problema:
this.props.children es el valor inicialonBlur actualiza los accesorios de event.target.innerHTMLEstablecer el atributo html contenteditable permite modificar el contenido de ese elemento en el navegador. React le advierte que tiene hijos dentro de ese elemento que son administrados por React. React solo funciona de arriba hacia abajo. Lo que significa que administra un modelo en el nivel superior y mantiene un DOM virtual que representa esos datos, luego representa el árbol DOM basado en ese DOM virtual. Cualquier cambio que realice en el DOM fuera de React (como configurar el contenido como contenteditable y permitir que un usuario edite el contenido directamente en el navegador) será potencialmente eliminado o causará problemas para React cuando vaya a actualizar esos elementos administrados.
En su situación, no le importa que el nodo {this.props.children} se vuele porque sabe que está detectando los cambios y haciendo lo que necesita con él. Solo le advierte que es mejor que no espere que el nodo permanezca intacto y actualizado con precisión por React cuando permite que el navegador edite el contenido directamente.
Si sabe lo que está haciendo (y por ahora parece que lo sabe), puede suprimir esa advertencia agregando suppressContentEditableWarning={true} .
¡Gracias @Chev! Se corrigieron las advertencias..
<p className={editing ? 'editing' : ''} onClick={editOnClick ? this.toggleEdit : undefined} contentEditable={editing} ref={(domNode) => { this.domElm = domNode; }} onBlur={this.save} onKeyDown={this.handleKeyDown} {...this.props} suppressContentEditableWarning={true} > {this.props.value} </p>