Вот

Как отобразить реагирующий компонент из строки html в ReactJS при установке в dangeroussetinnerHtml?

1021 просмотра

2 ответа

Я пытаюсь загрузить компонент динамически из строки HTML. Например: у меня есть HTML-строка, как следует из JSON.

 <div>This is some html content having a component of <Combobox params="option1,option2,option3"/></div>

Вот <Combobox params="option1,option2,option3"/>компонент React, который мне нужно визуализировать как комбинированный список HTML с опциями 1,2 и 3 вместе с текстами. Итак, есть ли способ сделать такие вещи в React.

Автор: veerasuthan V Источник Размещён: 08.11.2019 11:02

Ответы (2)


2 плюса

Весь JSX может быть проанализирован в HTML с помощью метода renderToString.

import ReactDOMServer from 'react-dom/server';   

render() {
  const html = ReactDOMServer.renderToString(<div><Combobox /></div>);
  return (
    <div dangerouslySetInnerHTML={html}></div>
  );
}
Автор: vijayst Размещён: 20.08.2016 08:15

2 плюса

Чтобы основываться на ответе Виджайста , если вы используете redux / реагировать-избыточно, а это «подключенный» компонент, вам нужно будет снова импортировать и передать хранилище.

import ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
import store from '../redux/store';

render() {
  const html = ReactDOMServer.renderToString(<Provider store={store}><Combobox /></Provider>);
  return <div dangerouslySetInnerHTML={html}></div>;
}
Автор: jabacchetta Размещён: 18.04.2017 04:52
Вопросы из категории :
32x32