encounter the same problem, and think about it is actually a common scenario, after a long period of twists and turns to make their own solution, hoping to make concerted efforts to come up with a better solution.
background: for dynamic JSX splicing of an array, there are currently three pieces of data that need to be wrapped in Row.
scenario: the treatment here in the original project is exhaustive. Write all the Col in the form of three Row, as follows:
<div>
<Row>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('realName', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('sex', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('age', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('idNo', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('cardNo', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
<Col span="8">
<FormItem {...formItemLayout} label=":">
<Input {...getFieldProps('bank', { initialValue: '' }) } disabled={true} style={{border:'none', background:'-sharpFFF', display:'block'}}/>
</FormItem>
</Col>
</Row>
...
</div>
the problem of writing in this way is obvious, and the variable cost is very high. If you want to insert a new Col, in the middle of the original layout, you need to manually push the Col behind the item one bit in turn, and a lot of manual labor (writing the code in this way is really moving bricks). The advantage is that the code is intuitive and easy to understand, the novice can also change it, and the format of the code can directly reflect the layout on the screen.
Analysis: the only thing you want to do here is to display a row in groups of three for an array that may change, and a newline display that exceeds three
idea:
1,
2 for data grouping, generate Dom
3 after traversing the grouped array, render and display
in JSX specific steps:
1, the array is as follows
const rowList = [
{
label: ':',
propKey: 'realName',
},
{
label: ':',
propKey: 'sex',
},
{
label: ':',
propKey: 'age',
},
{
label: ':',
propKey: 'idNo',
},
{
label: ':',
propKey: 'cardNo',
},
{
label: ':',
propKey: 'bank',
},
...
]
The keys in the
array retain only indicative attributes, which ensures minimal changes when adding new array items, and array traversal for common properties to add
//
for (let i = 0; i < rowList.length; iPP) {
const eachObj = rowList[i];
if (eachObj.initialValue === undefined) {
eachObj.initialValue = '';
}
if (eachObj.disabled === undefined) {
eachObj.disabled = true;
}
if (eachObj.style === undefined) {
eachObj.style = {border:'none', background:'-sharpFFF', display:'block'}
}
}
iterate through the array and put three into a group
...,imgs,...
const imgCols =[];
for (let i = 0; i < imgs.length; i+=3){
const rowArr = imgs.slice(i, i+3);
const ele =(
<>
<Row>
{
rowArr.map((item, j)=>{
return (
<Col md={8} sm={24} key={j+i}>
<img src={item} width="100%" style={{border:'1pxsolid-sharpddd', borderRadius:10}}/>
</Col>
)
})
}
</Row>
</>
)
imgCols.push(ele);
}
