如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目
How to render array entries in JSX using map() function with conditional wrapping
我在 JavaScript 中有一个对象数组,我想遍历这些对象和 return 一些带有 bootstrap class 的 JSX,这样每个行总是在其中显示 2 列。
options: [
{
"letter":"A",
"text": "14 March 1879"
},
{
"letter":"B",
"text": "14 March 1897"
},
{
"letter":"C",
"text": "24 May 1879"
},
{
"letter":"D",
"text": "24 June 1879"
}
]
根据我使用其他语言和模板引擎的经验,这非常简单:您只需创建一个开始和结束 div
标记,其中 class 为 row
,然后使用在您的模板引擎中,您循环遍历并呈现每个对象,直到循环的计数器为 2
时,您动态地结束该角色并开始一个新角色。
像这样:
<div class="row">
for (var i in options) {
if(i%2 === 0) {
<!-- render object ... -->
</div><!-- then end this row -->
<div class="row"><!-- start new row -->
} else {
<!-- render object -->
}
}
</div>
我在我的 map 函数中尝试了这个方法,它给出了一个语法错误,因为在条件通过的情况下 returned 的值不是有效的 JSX。
感谢您的帮助。
编辑:
最后我想达到的效果是:
如果对象数组包含2个对象,我应该可以这样动态显示它:
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
A <!-- that is, option.letter -->
</div>
</div>
<div class="col-md-6">
<div class="option wrong-option">
B <!-- that is, option.letter -->
</div>
</div>
</div>
如果数组包含3个对象,我想实现:
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
A <!-- that is, option.letter -->
</div>
</div>
<div class="col-md-6">
<div class="option wrong-option">
B <!-- that is, option.letter -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
C <!-- that is, option.letter -->
</div>
</div>
</div>
这样的怎么样?
{options.map((option, i) => (
i % 2 === 0 ? null : ( // skip every 2nd row
<div class="row">
A: {option}
B: {i < options.length ? options[i + 1] : null}
</div>
)
)}
您可以使用常规的 for 循环增加 i
每个循环 2,并检查第二个选项是否设置为处理长度不均匀的数组:
例子
function App() {
const content = [];
for (let i = 0; i < options.length; i += 2) {
content.push(
<div class="row">
<div class="col-md-6">
<div class="option correct-option">{options[i].text}</div>
</div>
{options[i + 1] && (
<div class="col-md-6">
<div class="option correct-option">{options[i + 1].text}</div>
</div>
)}
</div>
);
}
return <div>{content}</div>;
}
HTML:
结果:
验证:
适用于:
Array.length = 0
&
Array.length = n
您想要 3 列?...定义一个 const 而不是幻数“2”...
代码:
const options = [
{
"letter":"A",
"text": "14 March 1879"
},
{
"letter":"B",
"text": "14 March 1897"
},
{
"letter":"C",
"text": "24 May 1879"
},
];
return (
<>
{
Array.from(Array(Math.round(options.length / 2)).keys()).map((number, index) => {
return (
<div className="row">
{
options.slice(index * 2, (index * 2) + 2).map(option=>{
return (
<div className="col-md-6">
<div className={`option ${option.true ? 'correct-option' : 'wrong-option'}`}>
{option.letter}-{option.text}
</div>
</div>
);
})
}
</div>
);
})
}
</>
);
我在 JavaScript 中有一个对象数组,我想遍历这些对象和 return 一些带有 bootstrap class 的 JSX,这样每个行总是在其中显示 2 列。
options: [
{
"letter":"A",
"text": "14 March 1879"
},
{
"letter":"B",
"text": "14 March 1897"
},
{
"letter":"C",
"text": "24 May 1879"
},
{
"letter":"D",
"text": "24 June 1879"
}
]
根据我使用其他语言和模板引擎的经验,这非常简单:您只需创建一个开始和结束 div
标记,其中 class 为 row
,然后使用在您的模板引擎中,您循环遍历并呈现每个对象,直到循环的计数器为 2
时,您动态地结束该角色并开始一个新角色。
像这样:
<div class="row">
for (var i in options) {
if(i%2 === 0) {
<!-- render object ... -->
</div><!-- then end this row -->
<div class="row"><!-- start new row -->
} else {
<!-- render object -->
}
}
</div>
我在我的 map 函数中尝试了这个方法,它给出了一个语法错误,因为在条件通过的情况下 returned 的值不是有效的 JSX。
感谢您的帮助。
编辑:
最后我想达到的效果是:
如果对象数组包含2个对象,我应该可以这样动态显示它:
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
A <!-- that is, option.letter -->
</div>
</div>
<div class="col-md-6">
<div class="option wrong-option">
B <!-- that is, option.letter -->
</div>
</div>
</div>
如果数组包含3个对象,我想实现:
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
A <!-- that is, option.letter -->
</div>
</div>
<div class="col-md-6">
<div class="option wrong-option">
B <!-- that is, option.letter -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="option correct-option">
C <!-- that is, option.letter -->
</div>
</div>
</div>
这样的怎么样?
{options.map((option, i) => (
i % 2 === 0 ? null : ( // skip every 2nd row
<div class="row">
A: {option}
B: {i < options.length ? options[i + 1] : null}
</div>
)
)}
您可以使用常规的 for 循环增加 i
每个循环 2,并检查第二个选项是否设置为处理长度不均匀的数组:
例子
function App() {
const content = [];
for (let i = 0; i < options.length; i += 2) {
content.push(
<div class="row">
<div class="col-md-6">
<div class="option correct-option">{options[i].text}</div>
</div>
{options[i + 1] && (
<div class="col-md-6">
<div class="option correct-option">{options[i + 1].text}</div>
</div>
)}
</div>
);
}
return <div>{content}</div>;
}
HTML:
结果:
验证: 适用于: Array.length = 0 & Array.length = n 您想要 3 列?...定义一个 const 而不是幻数“2”...
代码:
const options = [
{
"letter":"A",
"text": "14 March 1879"
},
{
"letter":"B",
"text": "14 March 1897"
},
{
"letter":"C",
"text": "24 May 1879"
},
];
return (
<>
{
Array.from(Array(Math.round(options.length / 2)).keys()).map((number, index) => {
return (
<div className="row">
{
options.slice(index * 2, (index * 2) + 2).map(option=>{
return (
<div className="col-md-6">
<div className={`option ${option.true ? 'correct-option' : 'wrong-option'}`}>
{option.letter}-{option.text}
</div>
</div>
);
})
}
</div>
);
})
}
</>
);