1

我有一个 React 类，它接受一个 JSON 对象数组并输出一组表示键和值的 div。问题是，json 中的每个对象内部都有大约 60 个键值对；在此示例中，我正在为每个对象的第 19 个索引渲染 div：

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"


class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data
  }
  renderDiv = () => {
    var df4 = df3["Devotions"];
    return df4.map(v => {
      return Object.keys(v).map((host) => {
        return (
          <div class={host}>
            {host} {v[host][19]}
            <div class='space' style={{ borderRadius:'19px',
              transform:`scale(${v[host][19]},${v[host][19]})`,
              opacity:'9%'}} >
            </div>
          </div>
        );
      });
    });
  };

  render() {
    return <div id="Maps">{this.renderDiv()}</div>;
  }

}

export default Maps

我想做的是控制渲染，以便每个索引的 div 按顺序显示在屏幕上。

return Object.keys(v).map((host) => {
        return (
          <div class={host}>
            {host} {v[host][19]}
            <div class='space' style={{ borderRadius:'19px',
              transform:`scale(${v[host][19]},${v[host][19]})`,
              opacity:'9%'}} >
            </div>
          </div>

我不确定是否应该将所有的 div id 集都包装在一个 div 中，然后将它们连接到一个关键帧，但我不确定是否有更优雅的方式来做到这一点。

一如既往，感谢您的帮助！

4

1 回答 1

1

我认为这是你需要的：

考虑到您有多个对象，在每个对象内部，数组中有一些数据，您希望按顺序显示所有这些数据。

renderDiv = () => {
    var df4 = df3["Devotions"];
    let updatedArray = [];
    df4.forEach(v => { //<--- no need of map
        Object.keys(v).forEach((hosts) => { //<--- no need of map
            updatedArray = [...updatedArray , 
                            ...v[hosts].map((host) => {
                                return (
                                <div className={host}>
                                    {host} {host}
                                    <div className='space' style={{ borderRadius:'19px',
                                    transform:`scale(${host},${host})`,
                                    opacity:'9%'}} >
                                    </div>
                                </div> )
                            })
                            ]
        })
    })
    return updatedArray;
}
于 2020-05-21T01:43:44.810 回答