Для любого из будущих улучшений GProst Answer вы можете использовать ReactDOMserver, так мы можем реализовать то же самое.
ой сенарио:
1. Запрос приложения CMS (Система управления контентом) на содержание страницы.
2. CMS возврат"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Приложение использует контент, отображает соответствующий компонент с данными, указанными в атрибуте.
Я не могу понять, как это сделатьшаг 3 Реактивно, любой совет приветствуется.
Спасибо @ Гленн Рейес, вотпесочница показать проблему.
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'));
Вот живая демонстрация сделано Vuejs. строка"<div v-demo-widget></div>"
может рассматриваться как директива Vuejs и отображается.Исходный код.