React Native+CoffeeScript层级对象视图构建：仅显示子元素问题

嘿，我明白你想要用React Native结合CoffeeScript把层级数据渲染成直观的视图结构——别担心，这个问题其实很容易解决，核心就是嵌套遍历你的数据数组，把每个层级的内容对应到React Native的组件里。

核心思路 #

你的state.data是一个两层结构的数组：外层是分类（Category），每个分类下包含项目（Project）数组。我们只需要：

1. 遍历外层的分类列表，渲染每个分类的名称
2. 在每个分类内部，遍历对应的项目数组，渲染每个项目的信息
3. 通过样式缩进区分层级，让视图结构更直观

完整CoffeeScript代码示例 #

import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'

class HierarchicalView extends Component
  constructor: (props) ->
    super(props)
    # 你的原始状态数据
    @state =
      data: [
        {
          name: 'Category 1'
          projects: [
            { id: 1, name: 'Project 1' }
            { id: 2, name: 'Project 2' }
          ]
        }
        {
          name: 'Category 2'
          projects: [
            { id: 3, name: 'Project 3' }
            { id: 4, name: 'Project 4' }
          ]
        }
      ]

  render: ->
    <View style={styles.container}>
      # 遍历外层分类数组
      { @state.data.map((category) =>
        <View key={category.name} style={styles.categoryContainer}>
          # 渲染分类名称
          <Text style={styles.categoryText}>{category.name}</Text>
          # 遍历当前分类下的项目数组
          { category.projects.map((project) =>
            <View key={project.id} style={styles.projectContainer}>
              # 渲染项目信息
              <Text style={styles.projectText}>
                ID: {project.id} - {project.name}
              </Text>
            </View>
          )}
        </View>
      )}
    </View>

# 样式定义，用来区分层级视觉效果
const styles = StyleSheet.create
  container:
    flex: 1
    padding: 16
  categoryContainer:
    marginBottom: 20
  categoryText:
    fontSize: 20
    fontWeight: 'bold'
    marginBottom: 8
  projectContainer:
    marginLeft: 16 # 缩进项目，体现层级
    marginBottom: 4
  projectText:
    fontSize: 16

关键细节说明 #

• 箭头函数（=>）的使用：在map回调里必须用箭头函数，这样能确保回调内部的this指向组件实例，才能正确访问@state。如果用普通函数（->），this的指向会丢失，导致拿不到数据。
• key属性的必要性：React要求列表中的每个元素都要有唯一的key属性，帮助它高效地识别和更新组件。这里分类用name（假设分类名称唯一），项目用id（天然唯一）作为key是很合适的选择。
• 层级视觉区分：通过给项目容器添加marginLeft样式，让项目相对于分类名称缩进，直观体现从属关系。你也可以根据需求调整样式，比如添加边框、背景色等增强层级感。

如果之后需要扩展功能（比如分类的展开/折叠），只需要给每个分类添加一个isExpanded的状态，控制项目列表的显示/隐藏就可以啦。

内容的提问来源于stack exchange，提问作者Maurice