Estoy tratando de crear una herramienta que tome cualquier elemento de React, lo represente en la pantalla y le permita editar cualquier accesorio de tipo cadena que termine representado en la pantalla con solo hacer clic en ellos (estilo WYSIWYG).

Para hacer esto, quiero representar el componente con algunos valores predeterminados para cada accesorio de cadena y cuando el usuario haga clic en el DOM, si hizo clic en un elemento que está asignado a un valor de accesorio, reemplazamos el elemento DOM con un equivalente de contenido editable. y actualice los accesorios para el componente representado en función de la entrada del usuario.

Por ejemplo con el siguiente componente

 const HelloWorld = props => ( Hello, <div>{props.name}</div> )

Me gustaría representar el componente HelloWorld con un valor predeterminado para el name , como Bob . Cuando el usuario hace clic en Bob en su pantalla, la herramienta reemplazaría el div con contenido editable y actualizaría el valor de prop para el name según la entrada del usuario.

Mi pregunta es, ¿cómo puedo encontrar el elemento secundario más DOM que finalmente representó un accesorio determinado?

En el ejemplo anterior, props.name se asignaría al elemento <div> .