¿Cómo analizar html para reaccionar componente?
Este es mi senario:
1. Solicitud de solicitud CMS (Sistema de gestión de contenido) para el contenido de la página.
2. Devolución de CMS"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. La aplicación consume el contenido, representa el componente correspondiente con los datos proporcionados en el atributo.
No puedo entender como hacerlopaso 3 En React way, cualquier consejo es apreciado.
Gracias @Glenn Reyes, aquí hay unSalvadera para mostrar el problema
import React from 'react';
import { render } from 'react-dom';
const SpecialButton = ({ children, color }) => (
<button style={{color}}>{children}</button>
);
const htmlFromCMS = `
<div>Hi,
<SpecialButton color="red">My Button</SpecialButton>
</div>`;
const App = () => (
<div dangerouslySetInnerHTML={{__html: htmlFromCMS}}>
</div>
);
// expect to be same as
// const App = () => (
// <div>Hi,
// <SpecialButton color="red">My Button</SpecialButton>
// </div>
// );
render(<App />, document.getElementById('root'));
Aquí hay una demostración en vivo hecho por Vuejs. Cuerda"<div v-demo-widget></div>"
podría tratarse como la directiva Vuejs y representarse.Código fuente.