如何在React中用内联样式将chart__amount__item宽度设为JSON数据值？

问题根源 #

你当前的写法style={{ width: "item.amount/7" }}存在两个核心问题：

• 把JavaScript表达式包裹在字符串中，React会将整个"item.amount/7"当作字面量文本，不会解析变量或执行计算
• 缺少CSS长度单位（如%、px），浏览器无法识别无单位的宽度值

修复方案 #

1. 修正内联样式的写法 #

使用模板字符串将计算逻辑与单位拼接，让React正确解析动态值：

// 若按item.amount与7的比例设置百分比宽度
style={{ width: `${item.amount / 7}%` }}

如果是做消费金额对比的柱状图，更合理的方式是基于数据中的最大金额计算相对宽度，这样能直观展示各天消费的占比：

// 先获取所有金额中的最大值
const maxAmount = data.length > 0 ? Math.max(...data.map(item => item.amount)) : 0;

// 基于最大值计算相对宽度
style={{ width: `${(item.amount / maxAmount) * 100}%` }}

2. 优化冗余代码 #

你的代码中amount状态与data完全重复，可以直接删除amount相关的状态声明与赋值，简化逻辑。

完整修正代码 #

import React, { useEffect, useState } from "react";

const TheChart = () => {
  const [data, setData] = useState([]);

  const getData = () => {
    fetch("data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((res) => res.json())
      .then((fetchedData) => setData(fetchedData));
  };

  useEffect(() => getData(), []);

  // 获取金额最大值，用于计算相对宽度
  const maxAmount = data.length > 0 ? Math.max(...data.map(item => item.amount)) : 0;

  return (
    <div className="chart">
      <h2 className="chart__title"> Spending - Last 7 days</h2>
      <div className="chart__amount">
        {data.map((item, index) => (
          <div
            className="chart__amount__item"
            key={index}
            // 这里可以根据需求选择两种写法之一
            style={{ width: `${(item.amount / maxAmount) * 100}%` }}
          ></div>
        ))}
      </div>
      <div className="chart__days">
        {data.map((item, index) => (
          <div key={index} className="chart__day__item">
            {item.day}
          </div>
        ))}
      </div>
    </div>
  );
};

export default TheChart;

关键说明 #

• 模板字符串`${}`是React中动态生成内联样式值的标准写法，能正确执行JavaScript表达式并拼接文本
• 必须添加有效的CSS长度单位，否则浏览器会忽略宽度属性
• 基于最大值计算相对宽度的方案，能让图表的比例更符合数据对比的需求，避免固定除以7导致的展示不合理问题

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