|
 |
|
React ขึ้นแถวใหม่ทุกๆ 4 รูป ทำยังไงครับ .. |
|
 |
|
|
 |
 |
|

Code (JavaScript)
import React from 'react'
class PictureCard extends React.Component {
render(){
const arr = [{id:1, date:'16-01-2001', like:0, comment:0}, {id:2, date:'17-01-2001', like:1, comment:1},
{id:2, date:'17-01-2001', like:1, comment:1},{id:3, date:'18-01-2001', like:3, comment:3},{id:4, date:'20-01-2001', like:4, comment:4}]
const row =1;
const picture = arr.map(picture=>
<td key={picture.id}><img src='/images/picture.png'/><br/> Date:{picture.date}<br/>
Like:{picture.like}<br/> Comment:{picture.comment}</td>)
return <div>{picture}</div>
}
}
export default PictureCard
React ขึ้นแถวใหม่ทุกๆ 4 รูป ทำยังไงครับ ต้องเพิ่มตรงไหน
Tag : HTML, HTML5, JavaScript, Node.js

|
ประวัติการแก้ไข 2019-06-07 23:13:44
|
 |
 |
 |
 |
Date :
2019-06-07 23:12:54 |
By :
nobparad |
View :
1459 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
หาคำสั่งใหม่ ในการทำงาน arr.map มันไม่เหมาะที่จะใช้งาน กับ td
td มันเป็น ส่วนหนึ่งของ tr ซึ่งเป็นการแสดงผลรายบันทัด กำหนดขึ้นบันทัดใหม่ ยาก ต้องใช้ css ช่วย
ใช้ for ธรรมดาก็พอ
หรือแนะนำให้ไปอ่าน css ที่ใช้ในการควบคุม tr td เพิ่มเติม
|
 |
 |
 |
 |
Date :
2019-06-08 07:56:28 |
By :
Chaidhanan |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 00
|