React Flexbox-grid 动态构建

Question

我希望你能帮助我解决这个问题。我一直在尝试使用 flexbox-grid 在动态反应中创建一个网格已经有一段时间了。我现在想要实现的是每 3 个元素创建一个新行。我一直在玩流星 simple-todos 示例，我正在尝试扩展它以了解更多信息。

到目前为止，我所拥有的代码是：

renderTasks() {
let filteredTasks = this.props.tasks;

return filteredTasks.map((task, i) => {
  const currentUserId = this.props.currentUser && this.props.currentUser._id;
  const showPrivateButton = task.owner === currentUserId;

  if (i % 3 == 0){
    console.log("row " + i);
    return (
      <Row>
        <Task
          key={task._id}
          task={task}
          showPrivateButton={showPrivateButton}
        />
      </Row>
    );
  }else{
    console.log("col " +i );
    return (

      <Task
        key={task._id}
        task={task}
        showPrivateButton={showPrivateButton}
      />
    );
  }

});
}

这里的问题是我不能让该行保持打开状态，而必须立即关闭它。我认为这应该不难实现，但我用谷歌搜索了很多，找不到任何东西:(

Answer 1

这就是我要做的。首先，我会根据它们应该放置的行对任务进行分组。然后我会有一个数组数组，或多或少像这样：

[
  [ task_1, task_2, task_3 ],
  [ task_4, task_5 ]
]

然后我会映射这个数组来渲染每一行。最后，要渲染一行，我会映射该行的任务并渲染每个任务。

类似这样的：

renderTasks() {
  let filteredTasks = this.props.tasks;
  let taskRows = filteredTasks.reduce(function (rows, task, i) {
    let rowIndex = Math.floor(i / 3);

    if (i % 3 == 0) {
      rows[rowIndex] = [task]
    } else {
      rows[rowIndex].push(task)
    }
    return rows;
  }, []);

  return taskRows.map(this.renderTasksRow);
}

renderTasksRow(rowTasks) {
  return <Row>{rowTasks.map(this.renderTask)}</Row>;
}

renderTask(task) {
  const currentUserId = this.props.currentUser && this.props.currentUser._id;
  const showPrivateButton = task.owner === currentUserId;

  return (
    <Task
      key={task._id}
      task={task}
      showPrivateButton={showPrivateButton}
    />
  );
}