Supongamos que tengo un componente principal y secundario en el lado del cliente, el lado del servidor devuelve una cadena de plantilla como la siguiente:
<Parent name="parent"><Child>i am child</Child></Parent>ahora necesito mostrar eso dentro del contenedor en el lado del cliente
<div id="container">{__templateplaceholder}</div>¿Alguien sabe cómo podría representar el componente principal y secundario en esa área de marcador de posición? gracias.
Puede usar directamente su cadena de plantilla dentro de la etiqueta, pero asegúrese de volver a representar la página cuando el backend devuelva los datos. Puede usar la función React.useState() para establecer el valor de la cadena de plantilla devuelta desde el backend.
const [templateString , setTemplateString] = React.useState('');dondequiera que reciba los datos del backend en su código de reacción, agregue esto, esta línea volverá a representar la página después de actualizar el valor de la cadena de plantilla para que se muestre correctamente en el lado del cliente
setTemplateString(template_string_recieved_from_backend)Y la función React debería verse como
const App = () => { return ( <div id = "container" dangerouslySetInnerHTML={{ __html: templateString }}> </div> ) } export default App;