Javascript 反应：如何将jsx保存到状态，然后在dom中显示jsx

我正在尝试将变量

showMe

的值设置为某个jsx，然后将其保存到状态

 const showMe = `<span><div>${content.data[i].type}</div><div>${'EOS'+ content.data[i].quantity}</div><div>${'$ ' + content.data[i].price}</div><div>${'$ ' +Number(content.data[i].price*content.data[i].quantity).toLocaleString('en')}</div></span>`
setState({...state, showMe});

我猜我正在把html保存为字符串而不是jsx？如果是，如何保存jsx而不是字符串

我也试过了

sellArray += <span><div>{content.data[i].type}</div><div>{'EOS ' + content.data[i].quantity}</div><div>{'$ ' + content.data[i].price}</div><div>{'$ ' +Number(content.data[i].price*content.data[i].quantity).toLocaleString('en')}</div></span>;

---

我不明白为什么会这样

你可以用巴别塔来改变它

npm安装--保存巴贝尔核心

然后在代码中

var babel = require('babel-core');
var Component = eval(babel.transform('<div><MyComponent /></div>').code);

var babel=require（'babel-core'）；
var组件=评估（巴别塔变换（“”）.code）；

或者你可以使用

从“React”导入React；
从“react html parser”导入react HtmlParser、{processNodes，convertNodeToElement，htmlparser2}；
类HtmlComponent扩展了React.Component{
render（）{
常量html='示例html字符串'；
返回{ReactHtmlParser（html）}；
}
}

---

但是，当将字符串转换为可执行代码时，这通常是一种不好的做法。

您可以使用来在

dom

中显示

showMe

状态变量

这是为您准备的工作演示

---

为什么不将showme作为功能组件编写？

const showMeArray = content.data.map((item: any) => <span><div>{item.type}</div><div>{'EOS ' + item.quantity}</div><div>{'$ ' + item.price}</div><div>{'$ ' +Number(item.price*item.quantity).toLocaleString('en')}</div></span>);

var babel = require('babel-core');
var Component = eval(babel.transform('<div><MyComponent /></div>').code);

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

<div dangerouslySetInnerHTML={{ __html: state.showMe }}></div>