[英]JSX conditional element in loop
How to define opening of a tag on a condition and closing of tag on another. 如何在某个条件下定义标签的打开,并在另一个条件上定义标签的关闭。 In the below sample I'm trying to wrap every two element on a new row.
在下面的示例中,我尝试将每两个元素包装在新行上。 However doesn't seem to work.
但是似乎不起作用。 Sample - https://jsfiddle.net/reactjs/69z2wepo/
样本-https: //jsfiddle.net/reactjs/69z2wepo/
render() {
let menuItems = [];
for (var i = 0; i < 10; i++) {
menuItems.push(
{i%2 !== 0 ? <div class="row">:<>}
<div>hi</div>
{i%2 === 0 ? </div>:<>}
);
}
return <div>{menuItems}</div>;
}
Build your data objects before rendering; 在渲染之前构建数据对象; this allows React to render in a declarative manner, and is flexible enough to render as many rows or columns that you'd like to add.
这使React能够以声明性的方式呈现,并且足够灵活以呈现您想要添加的任意行或列。
Also, I left the creation of the rows
array purposely verbose; 另外,我保留了创建
rows
数组的目的,目的是冗长; there's no reason you can't have a numRows
variable that's used in a loop to append to the rows
array. 没有理由没有循环中使用的
numRows
变量来追加到rows
数组。
https://codesandbox.io/s/clever-moser-3j51c https://codesandbox.io/s/clever-moser-3j51c
Component 零件
function App() {
const cell = "hi";
const rows = [
[cell, cell],
[cell, cell],
[cell, cell],
[cell, cell],
[cell, cell]
];
return rows.map((row, i) => {
return (
<div key={i} className="row">
{row.map((data, j) => (
<span key={j}>{data}</span>
))}
</div>
);
});
}
Output 输出量
hi hi
hi hi
hi hi
hi hi
hi hi
Since you didn't provide CSS, I swapped your inner <div>
elements for <span>
, so it up to you to style this appropriately. 由于您没有提供CSS,因此我将内部的
<div>
元素替换为<span>
,因此您可以自行设置适当的样式。
You need to revert your logic. 您需要恢复逻辑。 You are trying to always insert a
<div>
but what you need to do is keep it in an array the <div>
and push it only in the desired time. 您试图总是插入一个
<div>
但是您需要做的是将其保存在<div>
数组中,并仅在所需的时间将其推入。
render() {
let menuItems = [];
let hiDivs = []
for (var i = 0; i < 10; i++) {
hiDivs.push(<div>hi</div>)
if(hiDivs.length === 2){
menuItems.push(<div class="row">{hiDivs}</div>)
hiDivs = []
}
}
return <div>{menuItems}</div>;
}
You can use dangerouslySetInnerHTML
but it's very very bad and not recommended... 您可以
dangerouslySetInnerHTML
使用dangerouslySetInnerHTML
但这非常糟糕,不建议使用...
How about doing it this way? 这样做怎么样?
render() {
let menuItems = [];
for (var i = 0; i < 10; i++) {
const hi = <div>hi</div>
const item = i%2 === 0
? <div className="row">{hi}{hi}</div>
: hi;
menuItems.push(item);
}
return <div>{menuItems}</div>;
}
You might want to add a 'key' attribute as well since react will throw a warning otherwise for arrays of elements. 您可能还想添加一个'key'属性,因为react会对元素数组抛出警告。
If your desired output is simply what is below with no other constraints (ie always two hi s inside each row) 如果您想要的输出只是下面的输出而没有其他限制(即,每行内总是两个hi)
<div className="row">
<div>hi</div>
<div>hi</div>
</div>
<div className="row">
<div>hi</div>
<div>hi</div>
</div>
..........
You can do: 你可以做:
let menuItems = []
for(let i = 0 ; i < 5; i++){
menuItems.push(<div className="row"><div>hi</div><div>hi<div></div>)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.