javascript - reactJS 应用程序呈现包含数组的对象数组

Question

我有以下对象定义:

var idObject = {
    item1: "",
    item2: "",
    item3: "",
    array1: [],
    array2: [],
    array3: []
}

array1、array2 和 array3 中的项数始终相同，因此 array1.length 将等于 array2.length 将等于 array3.length。对于此示例，假设数组 1 中有 3 个项目，数组 2 中有 3 个项目，数组 3 中有 3 个项目。

对象会有多个实例，所以我用这行代码将它们插入不同的数组:

idArray.push(idObject);

在此示例中，假设我最终创建了 2 个 idObject。

我正在尝试渲染结构。输出应如下所示:

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]   

我在想出呈现数据的逻辑时遇到了问题。非常感谢任何帮助。

Answer 1

让我们从数组开始，这很简单，我们只需获取每个元素并将其包装到一个 div 中:

  const List = ({ list }) => list.map(el => (<div>{el}</div>));

现在我们必须对列表和标题进行分组:

 const TitleList = ({ list, title }) => (<div>
  <h3>{title}</h3>
  <List list={list} />
 </div>);

现在我们需要另一个组件来将您的一个对象变成三个标题列表:

 const Group = ({ item1, item2, item3, array1, array2, array3 }) => (<div className="row">
   <TitleList list={array1} title={item1} />
   <TitleList list={array2} title={item2} />
   <TitleList list={array3} title={item3} />
 </div>);

现在只需映射您的数组:

  const result = idArray.map(props => (<Group {...props} />));

你会得到一个可以挂载到 DOM 的元素数组:

 ReactDOM.render(result, document.body);