Question

我有一个映射的const变量，我用它在render方法中注入我的返回。我现在的问题是，我映射的对象本身就有一组对象。我想遍历每一个并添加jsx语法。这就是我所拥有的：

＆＃13;

{{1}}

＆＃13;

我为格式化道歉，无法正确理解。无论如何，所以在const task =声明中，我想遍历每个task.SubTasks（索引集合的集合）并添加另一个无序列表。

我试过简单地编写一个for循环，但它没有工作，并且还尝试编写另一个映射函数，它也没有用。这可行吗？

Answer 1

如果先创建一个空数组并将组件推送到它，那么另一个映射应该可以工作.. for循环可以工作。

const subTaskComponents = []
for (var i = 0; i < task.SubTasks.length; i++) {
  subTaskComponents.push(
    <ul key={task.SubTasks[i].id>
      <li>..</li>
    </ul>
  )
}

map是一个更好的解决方案

const subTaskComponents = task.SubTasks.map(subTask =>
  <ul key={subTask.id}>
    <li>..</li>
  </ul>
)

然后在任何一种情况下，您都可以使用与渲染中tasks相同的方式使用它：

render() {
  const tasks = this.state.tasks.map((task) => {
    const subTaskComponents = task.SubTasks.map(subTask =>
      <ul key={subTask.id}>
        <li>..</li>
      </ul>
    )

    return (
      <div>{subTaskComponents}</div>
    )
  }

  return (
    <div>{tasks}</div>
  )
}

如何在render方法中循环一个react const变量

1 个答案: