繁体   English   中英

无法在反应中有条件地呈现 div

[英]Unable to conditionally render a div in react

我试图在 if 语句中有条件地显示水平规则。 但是,这似乎没有显示任何内容。

我的控制台日志打印所有日期,比较输出FalseTrue符合预期。 然而没有渲染。

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM