javascript - 如何在 React.js 中将带有 jsx 的 html 转换为 jsx

Question

我想要一个 API，它可以通过 JSX 返回 HTML。加载 HTML 后，我想将其转换为 JSX 并从我的

传递 Prop

给定这组代码:

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')
);

我想要输出

<div>test</div>

相反，我得到

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

谢谢

Answer 1

我想你要找的是:

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

使用模板字面量来填充你想要的代码。