對于這種情況，使用 react.js 按檔案長度定義條件的最佳方法是什么？
這是一個示例代碼和框
我想做的方式不僅是顯示檔案，而且還根據檔案的長度顯示空框。
如果沒有上傳檔案，即默認，用戶將看到三個空框。
如果用戶上傳一個檔案，用戶將看到一張圖片和兩個空框。
如果用戶上傳兩個檔案，用戶將看到兩個影像和一個空框。
我為此洗掉了一些代碼，但是如果用戶上傳第三張圖片，用戶將看到一個加號圖示來添加新的三個空框以再次上傳三張圖片。
我想定義如下條件
如果檔案長度是1,4,7,10 ...
如果檔案長度是2,5,8,11 ...
如果檔案長度是3,6,9,12 ...
當前代碼正在靜態檢查檔案長度。
{files && (files.length === 2 || files.length === 5) && (
<div className="app2">
<div style={{ margin: " auto 0" }}>2</div>
{files.map((file) => (
<div className="contianer" onClick={handleClick}>
<img src={file.url} alt="image1" className="image" />
</div>
))}
<div className="contianer" onClick={handleClick}></div>
</div>
)}
這是運行良好的示例。
更改files長度以查看預覽和空框
uj5u.com熱心網友回復：
嘗試這樣的事情：
function FilesUploadSheet({ columns, files }) {
const [rows, setRows] = useState(Math.ceil(files.length / columns));
const totalSlots = rows * columns;
const emptySlots = totalSlots - files.length;
const addRow = useCallback(() => {
setRows(currentRows => currentRows );
}, []);
return <div>
{
files.map(file => (
<FileBlock file={file} key={file.name} />
))
}
{
emptySlots
? repeatTimes(emptySlots, index => (
<EmptyBlock key={index} />
))
: <PlusButton onClick={addRow} />
}
</div>
}
function repeatTimes(times, callback) {
return Array.from({ length: times }, (_, index) => callback(index));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/491234.html
上一篇：有條件地從資料框中洗掉行