反应：如何将 jsx 保存到 state 然后在 dom 中显示 jsx

Question

我试图将变量showMe的值设置为一些 jsx，然后将其保存在 state 中。

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

但是当我尝试将 jsx 放入 dom 时，我将其作为字符串显示 html 标签而不是解释它们

{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>;

但是 html 只显示[object Object]

如果我将值作为数组中的对象，我可以通过 map 处理它，它工作得很好，但我不想这样做。

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

我不明白为什么这有效

Answer 1

您可以通过使用dangerouslySetInnerHTML在dom中显示showMe state 变量。

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

这是给你的工作演示
https://stackblitz.com/edit/react-i9ha5h

Answer 2

你可以使用 babel 来改造它

npm install --save babel-core

然后在你的代码中

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

或者你可以使用react-html-parser

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>;
  }
}

但这在将字符串转换为可执行代码时通常是不好的做法