代码之家 › 专栏 › 技术社区 › Akhilesh

在ReactJs中呈现来自本地JSON(带有动态数据)的数据

reactjs javascript

Akhilesh · 技术社区 · 6 年前

"units" 各个对象中的数组可以不同。

[{
    "title": "title1",
    "units": [{
            "title": "unittitle1",
            "status": "on",
            "utilization": "76.4"
        },
        {
            "title": "unittitle1",
            "status": "on",
            "utilization": "76.4"
        },
        {
            "title": "unittitle1",
            "status": "on",
            "utilization": "76.4"
        },
        {
            "title": "unittitle1",
            "status": "on",
            "utilization": "76.4"
        }
    ]
},
{
    "title": "title2",
    "units": [{
            "title": "unittitle1",
            "status": "on"
        },
        {
            "title": "unittitle1",
            "status": "on"
        }
    ]
}

]

import React, { Component } from 'react';
import hardwareDetailsData from '../../../assets/json/UnitHardwareDetails.json';
import meter from '../../../assets/images/meter.svg';

class HardwareUnits extends Component {
  constructor() {
    super();
    this.state = {
      hardwareDetailsData: []
    };
  }

  render() {
    return hardwareDetailsData.map(hardwareData => (
      <div className="f-14">
        <ul className="list-inline list-pipe">
          <li className="list-inline-item">
            <span className="f-b">{hardwareData.units.title}</span>
            <span className="status-text ml-2 text-success">{hardwareData.units.status}</span>
          </li>
          <li className="list-inline-item">
            <span className="text-warning f-b">{hardwareData.units.utilization}</span>
            <img src={meter} alt="Meter" className="ml-3 icon-meter-size" />
          </li>
        </ul>
      </div>
    ));
  }
}

export default HardwareUnits;

2 回复 | 直到 6 年前

Papi 6 年前

return hardwareDetailsData.map(({ title, units }) => (
  <div className="title">
    {title}
    units.map({ title, status, utilization}) => (
      <div className="status">{status}</div>
    ));
  </div>
));

utilization 如果是这样的话。也可以拆分为组件。

Soroush Chehresa TommyF 6 年前

你的 render 方法如下:

 render() {
    return hardwareDetailsData.map((hardwareItem, index) => (
      <div className="f-14" key={index}>
        <ul className="list-inline list-pipe">
          {
            hardwareItem.units.map((unitItem, index) => (
              <li className="list-inline-item" key={index}>
                <span className="f-b">{unitItem.title}</span>
                <span className="status-text ml-2 text success">{unitItem.status}</span>
                <span className="text-warning f-b">{unitItem.utilization}</span>
                <img src={meter} alt="Meter" className="ml-3 icon-meter-size" />
              </li>
            ))
          }
        </ul>
      </div>
    ));
  }

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前