Question

我无法开发一个干净的解决方案来从容器组件内部渲染多个子组件。

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

<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>
        )
    }
}

我最初的想法是从父/容器组件的render方法遍历每个层，从以下开始：

{{1}}

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

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

Answer 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

如何迭代嵌套对象以呈现子反应组件

1 个答案: