無法在反應中有條件地呈現 div

Question

我試圖在 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>
        </>
  );

Answer 1

您的 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>
  </>
);