Como analisar o html no componente React?
Este é o meu senario:
1. Solicitação de aplicativo CMS (sistema de gerenciamento de conteúdo) para o conteúdo da página.
2. Retorno CMS"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. O aplicativo consome o conteúdo, renderiza o componente correspondente com os dados fornecidos no atributo
Eu não consigo descobrir como fazeretapa 3 No modo React, qualquer conselho é apreciado.
Obrigado @Glenn Reyes, aqui está umaCaixa de areia para mostrar o 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'));
Aqui está uma demonstração ao vivo feito por Vuejs. Corda"<div v-demo-widget></div>"
pode ser tratado como diretiva Vuejs e renderizado.Código fonte.