javascript - React:如何将 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});
但是当我尝试将 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]
如果我将值作为数组中的对象,我可以映射它并且它工作得很好,但我不想这样做。
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>);
我不明白为什么这有效
解决方案
你可以使用 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>;
}
}
但这在将字符串转换为可执行代码时通常是不好的做法
推荐阅读
- python - ValueError:发现样本数量不一致[1691、725]
- php - 我不明白为什么 get_class_vars() 在 php 7 和 codeigniter 4 中不起作用
- sql - SQL sum 除以日期计数
- jsp - 如何使用 jdbc 连接到 oracle
- php - 将 php 开关链接到 html php 页面
- css - Weasyprint 打印损坏的 pdf
- javascript - mmenu js API - 菜单未显示
- c++ - 在 C++ 中的 SDL2 和 OpenGL2 中将 rgb 像素阵列绘制或 blit 到窗口的最快方法
- r - 有没有办法在 R 断电的情况下保存循环的部分结果?
- javascript - 为什么这个 React/Javascript 对象未定义?