在 React Native 和 CoffeeScript 中从对象构建层次视图

Question

我想在 React native 中使用 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'
        }
      ]
    }
  ]

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

<View>
  <Text>Category 1</Text>
</View>
<View>
  <Text>Project 1</Text>
</View>
<View>
  <Text>Project 2</Text>
</View>
<View>
  <Text>Category 2</Text>
</View>
<View>
  <Text>Project 3</Text>
</View>
<View>
  <Text>Project 4</Text>
</View>

我最接近结果的是以下嵌套循环

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

但是这只会呈现项目（没有类别）。

我在这里错过了什么？我感觉这很明显，但我（再也）看不到了

编辑： 尽管@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>
  ) }

不像最初的方法那么干净，但至少它有效

Answer 1

您必须确保明确返回多行。请参阅我的小吃示例中的代码。您必须将其转换为 CoffeeScript

https://snack.expo.io/BkBS3vQhG

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

}

在 React Native 和 CoffeeScript 中从对象构建层次视图

Build hierarchical view from object in react native & coffeescript

coffeescript

react-native