将 JSX 添加到数组对象 Javascript答案

【问题标题】：Add JSX to Array object Javascript将 JSX 添加到数组对象 Javascript
【发布时间】：2019-09-02 19:48:14
【问题描述】：

在我的一个组件中，我想修改字体大小并将 JSX 添加到对象数组中的属性之一。有什么办法吗？

例子：

const data = [
  {
    name: 'Page A',name1: 'Page A', uv: 4000, pv: 2400, amt: 2400,
  },
  {
    name: 'Page B',name1: 'Page A', uv: 3000, pv: 1398, amt: 2210,
  },
  {
    name: 'Page C',name1: 'Page A', uv: 2000, pv: 9800, amt: 2290,
  },
  {
    name: 'Page D',name1: 'Page A',  uv: 2780, pv: 3908, amt: 2000,
  },
  {
    name: 'Page E',name1: 'Page A',  uv: 1890, pv: 4800, amt: 2181,
  }]

let graphData = []; 
let count = 0; 
data.map((d) => {
    graphData.push({"name": d.name + '' + d.name2, "profit": d.amt,"reve": d.p,v});
  }

我想将第一个值推送为 JSX ，类似这样 "name":(<div>d.name + '' + d.name2</div>)

有没有办法做到这一点？

【问题讨论】：

您可以将 html 或 JSX 作为字符串推送，但您必须将其解析为 JSX 以在您想要呈现它的位置。你想在哪里修改字体大小？
我想修改显示在 recharts BarChart 中的 Yaxis 标签。基本上，我正在修改 Yaxis 的 dataKey。因为它们没有正确显示。
你在 React 中尝试这个吗？ .如果是这样，请查看模板文字
codesandbox.io/s/yvo1kpn9vj
是的，你可以。 JSX gets compiled to objects 所以你会有一个代表 React 元素的对象数组。

标签： javascript reactjs jsx

【解决方案1】：

将其作为字符串传递。您可以使用 + 连接或模板字符串

data.map((d) => {
    graphData.push({"name": `<div>${d.name}${d.name2}</div>`});
  }

【讨论】：

你错过了这里

【解决方案2】：

执行以下操作：

data.map((d) => {
    graphData.push(`<div> name : ${d.name} ${d.name1} </div>`)
  }

i think this issue is the same as yours try looking at it

【讨论】：