Question

我正在尝试从html字符串动态加载组件。例如：我有一个像json这样的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中做这类事情。

Answer 1

可以使用renderToString方法将整个JSX解析为HTML。

import ReactDOMServer from 'react-dom/server';   

render() {
  const html = ReactDOMServer.renderToString(<div><Combobox /></div>);
  return (
    <div dangerouslySetInnerHTML={html}></div>
  );
}

Answer 2

要在vijayst's answer上构建，如果你正在使用redux / react-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>;
}

如何在dangerouslysetinnerHtml中设置时从ReactJS中的html字符串渲染react组件？

2 个答案: