React native 在react native&；中从对象构建层次视图；咖啡脚本

我想从React native with Coffeescript中的层次对象构建一个视图，但结果只获取子值

在我的构造函数中考虑以下对象

this.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'
        }
      ]
    }
  ]

从这个对象，我想构建一个简单的视图，比如

第一类
项目1
项目2
第2类
项目3
项目4

我得到的最接近结果是使用以下嵌套循环

<View>
  { this.state.data.map( ( category ) =>
    <View><Text>{category.name}</Text></View>
    category.projects.map( ( project ) =>
      <View><Text>{project.name}</Text></View>
    )
  ) }
</View>

{this.state.data.map（（category）=>
{category.name}
category.projects.map（（项目）=>
{project.name}
)
) }

但是，这仅渲染项目（不包括类别）

我错过了什么？我觉得这是很明显的事情，但我（再）看不到了

编辑： 虽然@mjabadilla解决方案在JSX中工作，但我无法将其转换为Coffeescript，因此我更改了对象结构并使其以这种方式工作

this.state = 
  {
    data: [
      {
        id: 1,
        name: 'Category 1'
        type: 'Category'
      },{
        id: 2, 
        name: 'Project 1'
        type: 'Project'
      },{
        id: 3
        name: 'Project 2'
        type: 'Project'
      },{
        id: 4
        name: 'Category 2'
        type: 'Category'
      },{
        id: 5
        name: 'Project 3'
        type: 'Project'
      },{
        id: 6
        name: 'Project 4'
        type: 'Project'
      }
    ]
  }

  { this.state.data.map( ( prop ) =>
    if prop.type == 'category'
      <View><Text>Category: {prop.name}</Text></View>
    else
      <View><Text>Project: {prop.name}</Text></View>
  ) }

this.state=
{
数据：[
{
id:1，
名称：“类别1”
类型：“类别”
},{
id:2，
名称：“项目1”
类型：“项目”
},{
身份证号码：3
名称：“项目2”
类型：“项目”
},{
身份证号码：4
名称：“类别2”
类型：“类别”
},{
身份证号码：5
名称：“项目3”
类型：“项目”
},{
身份证号码：6
名称：“项目4”
类型：“项目”
}
]
}
{this.state.data.map（（prop）=>
如果prop.type=='category'
类别：{prop.name}
其他的
项目：{prop.name}
) }

---

虽然没有最初的方法那么清晰，但至少它可以工作

您必须确保显式返回multiline。请参见我的零食示例中的代码。你必须把它转换成咖啡脚本

render（）{
返回(
{this.state.data.map（（category）=>{
返回(
{category.name}
{category.projects.map（（项目）=>(
{project.name}
))}
)
})}
);

---

}

您是jsx解决方案的工作人员，但我无法将其转换为coffeescript。我设法用另一种方式实现了我想要的，所以它最终起作用了。Thnx

this.state = 
  {
    data: [
      {
        id: 1,
        name: 'Category 1'
        type: 'Category'
      },{
        id: 2, 
        name: 'Project 1'
        type: 'Project'
      },{
        id: 3
        name: 'Project 2'
        type: 'Project'
      },{
        id: 4
        name: 'Category 2'
        type: 'Category'
      },{
        id: 5
        name: 'Project 3'
        type: 'Project'
      },{
        id: 6
        name: 'Project 4'
        type: 'Project'
      }
    ]
  }

  { this.state.data.map( ( prop ) =>
    if prop.type == 'category'
      <View><Text>Category: {prop.name}</Text></View>
    else
      <View><Text>Project: {prop.name}</Text></View>
  ) }

render() {
  return (
    <View>
      { this.state.data.map( ( category ) => {
        return (
          <View>
            <Text>{category.name}</Text>

            {category.projects.map( ( project ) => (
              <View>
                <Text>{project.name}</Text>
              </View>))}
            </View>
         )
     })}
    </View>
);