Filter循环中使用React Native Text组件及CoffeeScript层级组件渲染问询

嘿，我来帮你搞定这两个React Native相关的问题～

其实得先理清逻辑：filter只是用来筛选数组元素的工具，它本身不会帮你渲染组件。正确的流程是先用filter筛选出目标数据，再用map遍历筛选后的数组，逐个生成Text组件。

举个实际的例子，假设你有一组待办数据：

const todos = [
  { id: 1, text: '买早餐', completed: false },
  { id: 2, text: '写代码', completed: true },
  { id: 3, text: '整理文档', completed: false }
];

如果你想渲染所有未完成的事项，可以这么写：

import { Text, View } from 'react-native';

// 在组件的render方法中
render() {
  // 先筛选出未完成的事项
  const uncompletedTodos = todos.filter(todo => !todo.completed);
  return (
    <View>
      {/* 遍历筛选后的数组，渲染每个Text组件 */}
      {uncompletedTodos.map(todo => (
        <Text key={todo.id} style={{ marginVertical: 8, paddingLeft: 10 }}>
          {todo.text}
        </Text>
      ))}
      {/* 兜底：如果筛选结果为空，显示提示 */}
      {uncompletedTodos.length === 0 && <Text>暂无未完成事项</Text>}
    </View>
  );
}

这里要注意两个关键点：

• 必须给每个Text组件添加唯一的key属性，帮助React高效更新列表
• filter返回的是新数组，不会修改原数据，可放心使用

你的数据是扁平结构，首先得把它转换成树形结构（分类作为根节点，子任务挂在对应分类下），再通过递归渲染实现层级视图。我给你一步步拆解：

第一步：把扁平数据转成树形结构 #

先写个工具函数，帮你整理数据：

convertToTree = (data) ->
  # 先把所有元素按id存储，方便快速查找父节点
  itemsById = {}
  rootCategories = []

  # 初始化每个元素，给每个元素加children数组
  for item in data
    itemsById[item.id] = { ...item, children: [] }

  # 遍历元素，把子任务挂载到对应分类下
  for item in data
    if item.parent
      itemsById[item.parent].children.push itemsById[item.id]
    else
      # 没有parent的就是分类，放到根数组里
      rootCategories.push itemsById[item.id]

  rootCategories

第二步：递归渲染层级组件 #

写一个递归函数，根据节点类型渲染不同内容：

renderItem = (item) =>
  if item.type is 'category'
    # 渲染分类标题 + 下属任务
    <View key={item.id} style={{ marginLeft: 10, marginTop: 15 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</Text>
      {/* 递归渲染子任务 */}
      {item.children.map(child => @renderItem(child))}
    </View>
  else if item.type is 'task'
    # 渲染单个任务项
    <Text key={item.id} style={{ marginLeft: 25, marginTop: 6 }}>{item.name}</Text>

第三步：在主render方法中调用 #

最后在组件的render方法里整合逻辑：

render: ->
  treeData = convertToTree(@state.data)
  <View style={{ padding: 15 }}>
    {treeData.map(item => @renderItem(item))}
  </View>

这样渲染出来的结果就是清晰的层级结构：

• Category 1
  • Task 1
  • Task 2
• Category 2
  • Task 3
  • Task 4

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