フレックスボックスグリッドを動的に構築する

Question

私はこれを手伝ってくれることを願っています。私はかなりの時間フレックスボックスグリッドを使用してグリッドを動的に作成しようと試みてきました。私が今、達成したいのは、3つの要素ごとに新しい行を作成することです。私は流星シンプルトゥドスの例で遊んでいて、私はそれについてもっと学ぶためにそれを拡張しようとしています。私は、コードの面で、これまで持って何

は次のとおりです。

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