動態創建表，每行3列

Question

在我的 React 應用程序中，我想制作一個“卡片”頁面，每行需要 3 張卡片。

相關代碼如下：

    static renderCards(cards) {
        return (
            <div>
                {cards.map((card, index) =>  
                    index % 3 == 0 ?
                        <div className="row" key={card.id}>
                            {MyComp.colData(card) }
                    </div> :
                         MyComp.colData(card) 
                )}

            </div>);
    }

其中MyComp.colData返回單張卡的 html

我嘗試添加條件index % 3 == 0然后添加行包裝器，否則返回列數據。

但現在它在每一行上創建一個列

Answer 1

創建一行然后在其中附加 3 列。 然后重復相同。

告訴我這是否是你想要的。 我會解釋更多......

 let section = document.getElementById("container") let colCount = 3; let rowCount = 3; for (let i = 1; i <= rowCount; i++) { section.innerHTML += `<div id="row${i}"></div>`; for (let j = 1; j <= colCount; j++) { document.getElementById(`row${i}`).innerHTML += `<div id="column">i am a column</div>`; } }

 #row { outline: 1px solid red; } #column { background-color: red; } #column:nth-child(2) { background-color: pink; } #column:nth-child(3) { background-color: purple; }

 <section id="container"></section>