我是新来的反应者,有一个项目要做。我可以遍历所有数组。我只想检查一下数组并仅在其中包含特定信息时才显示。这是我的主要迭代代码。
state = {
top: [card1],
bottom: [card2],
rear: [card3],
bottom2: [card4],
bottom3: [card5],
mycards: [card7,card8],
myinfo: ["asd","card8"],
transition: {
item: null,
startTop: 20,
startAnim: true,
}
}
<div ref={(node) => { this.mycardinfo = node; }}>
{myinfo.map((item) => {
const startTop = transition.item === item ? transition.startTop : 0;
const animClass = transition.startAnim ? 'item-force-move' : '';
const style = {
transform: `translateY(${startTop}px)`,
}
return (
<div
className={`item item-mycard ${animClass}`}
onClick={(evt) => this.delete(item, evt)}
style={style}
>
{item}
</div>
我只想显示我的“ card8”元素。但是,当遍历所有数组时,它同时显示“ asd”和“ card8”。
我只应用过滤器来检索项目:
myinfo.filter(item=> item === "card8")[0]
取决于您是否将有多个“ asd”项目,您可能希望删除索引。过滤器将返回与条件测试匹配的所有项目的列表,在这种情况下为item==="asd"
只需使用if语句,如果不想映射它,则返回null:
if (item === "YOUR_CARD"){
return <div>{item}</div>;
}else{
return null;
}
编辑:正如其他人指出的,您也可以先过滤数组,然后映射它:
myinfo.filter(item => item === "YOUR_CARD")
如果只需要一张卡,请使用array.find,您将获得一个单件物品:
myinfo.find(item => item === "YOUR_CARD")