[英]Unable to conditionally render a div in react
我试图在 if 语句中有条件地显示水平规则。 但是,这似乎没有显示任何内容。
我的控制台日志打印所有日期,比较输出False
或True
符合预期。 然而没有渲染。
const todayDate = new Date();
const mm = todayDate.getMonth() + 1;
const dd = todayDate.getDate();
const yy = todayDate.getFullYear();
const myDateString = yy + '-' + mm + '-' + dd; //(US)
const currentNarratives = narrativesState.narratives?.sort((a, b) => a.date < b.date ? 1 : -1);
return (
<>
<div className="div-left">
{
datesarray.map(date => {
console.log("Current Date: ",myDateString)
console.log("Narrative Date: ", date)
console.log(myDateString > date)
if(myDateString == date){
<div>IN HERE</div>
}
// check if there are any references to report
return currentNarratives.length > 0
? (
<Card>
<div>
<DateHeader date={date} />
{currentNarratives.map(narrative => (
<div className="referencecontainer">
<div className="float-left overflow">
<Narrative id={narrative.id} title={narrative.title} scheduled={narrative.scheduled}/>
</div>
</div>
))}
</div>
</Card>
)
: null;
})}
</div>
</>
);
您的 div 没有被渲染,因为您没有在.map()
function 中返回它。 无论您从map()
function 返回什么,都将由 react 渲染。
所以,在 return 语句中移动你的div
。
return (
<>
<div className="div-left">
{datesarray.map((date) => {
console.log('Current Date: ', myDateString);
console.log('Narrative Date: ', date);
console.log(myDateString > date);
return (
<>
{/* MOVE DIV HERE */}
{myDateString == date && <div>IN HERE</div>}
{currentNarratives.length > 0 ? (
// check if there are any references to report
<Card>
<div>
<DateHeader date={date} />
{currentNarratives.map((narrative) => (
<div className="referencecontainer">
<div className="float-left overflow">
<Narrative
id={narrative.id}
title={narrative.title}
scheduled={narrative.scheduled}
/>
</div>
</div>
))}
</div>
</Card>
) : null}
</>
);
})}
</div>
</>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.