将对象数组转换为反应组件

Question

我们有如下的对象数组，

const obj = {
  1: [{
    row: 1,
    name: 'file1'
  }, {
    row: 1,
    name: 'file2'
  }],
  2: [{
    row: 2,
    name: 'file3'
  }]
} 

基于上面的元素，我想生成如下面的反应组件

  <React.Fragment>
    <h2>Elment: 1</h2>
     <div>file1</div>
     <div>fiel2</div>
    <h2>Element: 2</h2>
     <div>file3</div>
   </React.Fragment>

我想看看我们如何使React.Fragments符合此示例对象。

更新

只是为了澄清Element: {key}，key取自对象键。

Answer 1

import React from "react";
import { render } from "react-dom";

const obj = {
  1: [{ row: 1, name: "file1" }, { row: 1, name: "file2" }],
  2: [{ row: 2, name: "file3" }]
};

class App extends React.Component {
  render() {
    const data = Object.keys(obj).map(key =>
      obj[key].map((item, index) => (
        <React.Fragment>
          {index < 1 && <h1> Element {key} </h1>} {}
          <strong> File: </strong> {item.name}{" "}
        </React.Fragment>
      ))
    );
    return (
      <div>
        <p>IM THE APP</p>
        {data}
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

这就是你要做的事情，你要做的就是在map内组织，整理和设计它。

深度：

  

Object.keys（）方法返回给定对象自己的数组   可枚举的属性，与a提供的顺序相同   for ... in循环（不同之处在于for-in循环枚举   原型链中的属性也是如此。

 const data = Object.keys(obj).map(key =>
  obj[key].map((item, index) => (
    <React.Fragment>
      {index < 1 && <h1> Element {key} </h1>} {}
      <strong> File: </strong> {item.name}{" "}
    </React.Fragment>
  ))
);

完成Object.keys(obj)后，我们使用Object.keys(obj).map映射键，并使用它在原始对象内一次访问一个对象数组。在我们的其他地图函数中，我们映射当前数组并返回我们的jsx。

Answer 2

如果展平输入对象，编码和维护会更容易。

可能会转换现有的

const obj = {
  1: [{
    row: 1,
    name: 'file1'
  }, {
    row: 1,
    name: 'file2'
  }],
  2: [{
    row: 2,
    name: 'file3'
  }]
}

const obj = [{
  row: 1,
  names: ['file1', 'file2']
}, {
  row: 2,
  names: ['file3']
}]

转换完成后，使用地图和组件进行非常简单的迭代。

带代码的详细解决方案位于Stackblitz link

工作解决方案Output