Question

我试图从包含父/子关系的对象渲染层次结构组件视图（在Coffeescript中）

我的对象看起来像

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

我目前的做法如下

render: ->
  <Text>Hierarchy</Text>
  { this.state.data.map( ( data ) =>
    if data.type == 'category'
      this.renderView( data )
  ) }

和

renderView: (data) ->
  <View>
    <View>
      <Text>{data.name}</Text>
    </View>
    <View>
      { result = this.state.data.filter( ( obj ) ->
        if obj.parent == data.id
          <Text>{obj.name}</Text>
      ) }
    </View>
  </View>

上面的代码会导致以下错误

不变违规：对象作为React子项无效（找到：具有键{id，parent，name，type}）的对象

我知道在filter()循环中可以获得正确的数据。不知怎的，我不能在那里使用React Native <Text>元素，但为什么呢？

Answer 1

首先，来自return

的renderView方法render

render: ->
  <Text>Hierarchy</Text>
{
  this.state.data.map((data) =>
    if data.type == 'category'
      return this.renderView(data)
  ) }

另外，您必须先filter result，然后map

renderView: (data) ->
  { var result = this.state.data.filter(obj => obj.parent == data.id) }
  <View>
  <View>
    <Text>{data.name}</Text>
  </View>
  <View>
    {result.map(val => val.name)}
  </View>
  </View>

PS：我不太了解coffescript的语法，对于任何错字都很抱歉，但逻辑运行正常。

Answer 2

您的代码存在许多问题

在render函数中，您没有有效的JSX语法。因此，您需要将代码包装在一些包装器中。

<View>
      <Text>Hierarchy</Text>
      {this.state.data.map(data => data.type === 'category' && this.renderView(data))} // Also check if your map returns the data(Since I don't know coffeescript)
</View>

Filter函数会创建一个您要在View中尝试呈现的新数组，因此会抛出错误，而不是有效的React Child 。

因此你可以做到

return (
            <View>
                <View>
                    <Text>{data.name}</Text>
                </View>
                <View>
                    {this.state.data.map( obj => obj.parent === data.id &&  <Text>{obj.name}</Text>)}
                </View>
        </View>)

在filter循环中使用react本机Text组件

2 个答案: