反應：如何將 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>;
  }
}

但這在將字符串轉換為可執行代碼時通常是不好的做法