如何迭代嵌套对象以呈现子 React 组件答案

【问题标题】：How to Iterate Over Nested Object to Render Child React Components如何迭代嵌套对象以呈现子 React 组件
【发布时间】：2018-02-21 09:13:39
【问题描述】：

我在开发一个干净的解决方案来从容器组件内渲染多个子组件时遇到了麻烦。

我在以下架构中有一个 Store 对象：

{
    "events": {
        "2017": {
            "March": {
                "event1": {
                    "type": "concert"
                },
                "event2": {
                    "type": "hockey"
                }
            }
        },
        "2018": {
            "January": {
                "event3": {
                    "type": "basketball"
                }
            }
        }
    }
}

我想要格式化输出

<section>
    <ul><span>March 2017</span>
        <li>event1 - concert</li>
        <li>event2 - hockey</li>
    </ul>
    <ul><span>January 2018</span>
        <li>event3 - basketball</li>
    </ul>
</section>

我最初的想法是从父/容器组件的渲染方法中遍历每一层，从：

class Events extends Component {
    render() {
        let key = 0

        return  (
            <section>
                Object.keys(this.props.events).map(year => {

                  /* continue iterations and build JSX here */  

                })
            </section>
        )
    }
}

但是以这种方式映射三层深度并不是很优雅，更不用说，我在维护兼容的 JSX 时遇到了麻烦。

将这个对象解析成几个表示组件，让每个子组件在自己的级别处理迭代是解决这个问题的最佳方法吗？如果是这样，我会将对象的每一层（即：年、月）作为道具向下传递吗？

【问题讨论】：

标签： reactjs ecmascript-6 redux

【解决方案1】：

您可以做些什么来清理它是创建单独的表示组件并传递适当的数据以使其显示。

const data = {
  "events": {
    "2017": {
      "March": {
        "event1": {
          "type": "concert"
        },
        "event2": {
          "type": "hockey"
        }
      }
    },
    "2018": {
      "January": {
        "event3": {
          "type": "basketball"
        }
      }
    }
  }
}
const MonthEvents = ({ month, data }) => {
  return (
    <ul>
      {Object.keys(data).map((event, index) => {
        return <li>{event} {data[event].type}</li>
      })}
    </ul>
  )
}
const YearEvents = ({ year, data }) => {
  return (
    <ul>
      {Object.keys(data).map((month, index) => {
        return [
          <span>{month} {year}</span>,
          <MonthEvents key={index} month={month} data={data[month]} />
        ]
      })}
    </ul>
  )
}

class Events extends React.Component {
  render() {
    return (
      <section>
        {Object.keys(data.events).map((year, index) => {
           return <YearEvents key={index} year={year} data={data.events[year]}/>
        })}
        </section>
    )
  }
}

Working CodeSandBox

【讨论】：