Javascript 如何将带有jsx的html转换为React.js中的jsx

我想有一个API，返回带有JSX的HTML。加载HTML后，我想将其转换为JSX，并从我的

给定这组代码：

import { renderToString } from "react-dom/server";
import ReactDOM from 'react-dom';

function MyHtml (props) {
    var apiHtml = renderToString("<div>{this.props.title}</div>");
    return (
        <div dangerouslySetInnerHTML={{ __html:  apiHtml }} />
    )
}
export default MyHtml;
ReactDOM.render(
    <MyHtml title="test"/>,
    document.getElementById('test')
);

从“react dom/server”导入{renderToString}；
从“react dom”导入react dom；
函数MyHtml（道具）{
var apithtml=renderToString（“{this.props.title}”）；
返回(
)
}
导出默认的MyHtml；
ReactDOM.render(
,
document.getElementById（'test'）
);

我想要输出

<div>test</div>

测试

相反，我得到了

<div>{this.props.title}</div>

{this.props.title}

---

谢谢

我想你要找的是：

var apiHtml = renderToString(`<div>{${this.props.title}}</div>`);

var-apithtml=renderToString（`{${this.props.title}}`）；

---

使用模板文本填充所需的代码

我最后做了这样的事情：

var { title } = this.props; // => testing
var html = ReactDOMServer.renderToString("<div>${title}</div>");
var toRender = eval('`'+html +'`');

var{title}=this.props；//=>测试
var html=ReactDOMServer.renderToString（“${title}”）；
var toRender=eval（'`+html+'`'）；

要给出输出，请执行以下操作：

<div>testing</div>

测试

---

谢谢大家

我认为这将帮助您：当JSX使用webpack构建时，它将被传输到实际的js代码中。要从字符串动态创建组件，您应该查看@react顶级api（特别是

react.createElement

）。看见