JavaScript map映射数组渲染时如何修改元素样式 附报错解决

报错是因为你混淆了数据对象和DOM元素：tr是从交易数组里遍历出的普通数据对象，tr.amount是存储金额的数值，本身不存在style属性。访问tr.amount.style得到的是undefined，尝试给它赋值color自然会触发类型错误。
另外你把样式修改逻辑写在了JSX的内容插值位置，这部分是用来渲染页面文本/节点的，React中控制DOM样式需要直接把样式规则绑定到对应的真实渲染标签上，不能在内容表达式里操作不存在的DOM属性。

两种常用实现方式，按需选择即可：

方案1：动态绑定内联样式 #

把样式直接绑定到渲染金额的<td>标签上，根据金额正负动态返回对应的颜色值，{}插值里只放要渲染的金额数值：

{userData.transactions.length > 0 &&
   userData.transactions.map((tr) => (
       <tr className="border" key={tr.id}>
         <td><span className="history-category">{tr.category}</span></td>
         <td 
           className="amount"
           style={{ color: tr.amount > 0 ? "green" : "red" }}
         >
           {tr.amount}
         </td>
         <td>{tr.date}</td>
       </tr>
))}

注意：列表渲染建议给每一项<tr>加唯一key属性（比如交易id），避免React渲染警告，提升更新性能。

方案2：动态切换CSS类（更推荐） #

如果后续需要扩展更多样式（比如字重、背景色），用CSS类控制更易维护：

1. 先写好对应样式类：

.amount.positive {
  color: green;
}
.amount.negative {
  color: red;
}

2. JSX里动态拼接className即可：

{userData.transactions.length > 0 &&
   userData.transactions.map((tr) => (
       <tr className="border" key={tr.id}>
         <td><span className="history-category">{tr.category}</span></td>
         <td className={`amount ${tr.amount > 0 ? 'positive' : 'negative'}`}>
           {tr.amount}
         </td>
         <td>{tr.date}</td>
       </tr>
))}

内容的提问来源于stack exchange，提问作者awfha