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

Question

Im trying to set the value of the variable showMe to some jsx and then save that in 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});

but then when I try to put the jsx into the dom i get it as a string that shows the html tags instead of interpreting them

{state.showMe}

I guess im saving the html as a string and not jsx? If so how to save jsx instead of the string?

I also tried

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

But the html just shows [object Object]

If i have the values as objects in an array I can map over it and it works just fine, but i dont want to have to do that.

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

I dont understand why this works

Answer 1

You can display showMe state variable in dom by the use of dangerouslySetInnerHTML .

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

Here is the working demo for you
https://stackblitz.com/edit/react-i9ha5h

Answer 2

You can use babel to transform it

npm install --save babel-core

Then in your code

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

Or you can use 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>;
  }
}

But this is generally bad practise when transform string to execuatable code