Javascript 将JSX格式的字符串注入React组件

我有一个小页面，可以编译和显示html字符串。 字符串中的html以

页面如下所示：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Link, Button, Colors } from 'react-foundation';
require('./foundation.css')

var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>';

var App = ({ html }) => { return <div>{html}</div> }

ReactDOM.render(
<App html={htmlFromApi}/>,
document.getElementById('react')
);

var reactElement= toReactElement(htmlFromApi);
//the result is <div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>

import*as React from'React'；
从“react dom”导入*作为react dom；
从“react foundation”导入{Link，Button，Colors}；
需要（“./foundation.css”）
var htmlFromApi='SaveDelete'；
var-App=（{html}）=>{return{html}
ReactDOM.render(
我最初提供了一个答案，说明如何将字符串作为HTML直接插入React。但是，由于您还希望在将字符串插入React之前对字符串中的变量进行解析（以及其他潜在逻辑），因此我将这两个选项都保留在这里，因为它们可能对未来的读者有用


案例1-您的字符串已准备好插入
如果包含HTML的字符串已准备好直接插入React，并且不包含需要首先解析的代码，则应使用
dangerlySetinerHTML
。应将其设置在包含从API获取的HTML的包装div上

请参见下面的示例


var htmlFromApi='SaveDelete'；
var-App=（{html}）=>{return}
ReactDOM.render（，document.getElementById（'app'）；
尝试使用
react字符串格式
npm包。
例如：

从'react string format'导入{format}；
...
格式（'hiperlink:{0}，span标记：{1}'，Bla-Bla）；
尝试使用危险的LysetinerHTML-React.createElement（elementString，propsObject）如何“？@Dan不起作用，bcz危险的是，我们需要编译的html字符串，但我的字符串不起作用。”compiled@isa424我不能使用React.createElement bcz，我不知道字符串是什么样子，它是一个很长的字符串，有这么多嵌套的组件。谢谢你的回答，但是这样字符串中的值就不会被计算为r compiled，对吗，对不起，我的反应很差这是css就位后的结果只是一个简短的提示，但我认为您不希望在外部div中包含className，因为它不能正确输出。它最终会有一个属性className=“button basics example”在浏览器内部。仅使用word类，然后在笔内的css中为button basic示例设置一些样式，我能够生成一些样式，但在html字符串中使用类名时无法生成。对此有何想法？@DanielZuzevich DangerouslySetinerHTML需要编译html，因此无法使其编译里面有组件的字符串，比如，我的字符串是未编译的html，所以我需要一种编译html然后将其传递给dangerouslySetInnerHTML@Rana，我已经更新了我的答案。请看一看。
import { format } from 'react-string-format';
...
format('hiperlink: {0}, span tag: {1}', <a href="#">Click Me</a>, <span>Bla-bla</span>);