亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React - Javascript 和 JSX 的條件渲染,條件包裝器組件

React - Javascript 和 JSX 的條件渲染,條件包裝器組件

一只名叫tom的貓 2022-01-07 14:03:59
我正在嘗試有條件地渲染幾個共享組件,但出現錯誤:第 182:9 行: 期望一個賦值或函數調用,而是看到一個表達式 no-unused-expressions如果沒有<Conditional />包裝器組件,以下內容可以完美運行。但是,新的客戶要求是在到達特定于組件的 if-else 語句之前,對所有組件放置更高級別的條件。我想創建一個包裝器組件,<Conditional />而不是用更多條件或重復代碼來夸大現有的 if-else 語句。為了適當地呈現它,我用匿名箭頭函數包裝了 if-else 語句。但錯誤仍然存在!任何幫助,將不勝感激。...return (    <Grid container>      {enhancedSections.map((section, index) => {        <Conditional    // this is line 182          path={section.conditional ? section.conditional.param_name : null }          section={section}        >          {() => {            if (   // these series of if-else statements renders perfectly without the <Conditional/> wrapper              section.style == "single_select" &&              section.section_display_name == selectedSection            ) {                return (                  <SingleSelect                    key={section.definition.display_name}                    displayName={section.definition.display_name}                    description={                      section.definition.description                        ? section.definition.description                        : null                    }                    path={{ id: id, field: `${section.field}` }}                  />                );              } else if (                section.style == "boolean" &&                section.section_display_name == selectedSection              ) {                return (                  <Boolean                    key={section.definition.display_name}                    displayName={section.definition.display_name}                    description={section.definition.description}                    path={{ id: id, field: `${section.field}` }}                  />                );              } else if (                ...   // more conditional cmps here               )          }}        </Conditional>      })     }    </Grid>  );
查看完整描述

3 回答

?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

children提供給Conditional一個function。要將孩子渲染為函數(渲染道具),您應該像這樣執行它

shouldRender() ? props.children() : null


查看完整回答
反對 回復 2022-01-07
?
陪伴而非守候

TA貢獻1757條經驗 獲得超8個贊

children是一個函數,你只需要調用children.

一個例子:https : //codesandbox.io/s/focused-cloud-sql0d

編輯:忘了再提一件事——在你的“shouldRender”函數中,你指定了路徑但你從不使用它,因為它在你的道具中,你可以刪除它。


查看完整回答
反對 回復 2022-01-07
?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

我認為問題在于您的enhancedSections.map實際上并沒有返回任何東西。


return (

    <Grid container>

      {enhancedSections.map((section, index) => (

        <Conditional    // this is line 182

          path={section.conditional ? section.conditional.param_name : null }

          section={section}

        >

          {() => {

            if (   // these series of if-else statements renders perfectly without the <Conditional/> wrapper

              section.style == "single_select" &&

              section.section_display_name == selectedSection

            ) {

                return (

                  <SingleSelect

                    key={section.definition.display_name}

                    displayName={section.definition.display_name}

                    description={

                      section.definition.description

                        ? section.definition.description

                        : null

                    }

                    path={{ id: id, field: `${section.field}` }}

                  />

                );

              } else if (

                section.style == "boolean" &&

                section.section_display_name == selectedSection

              ) {

                return (

                  <Boolean

                    key={section.definition.display_name}

                    displayName={section.definition.display_name}

                    description={section.definition.description}

                    path={{ id: id, field: `${section.field}` }}

                  />

                );

              } else if (

                ...   // more conditional cmps here 

              )

          }}

        </Conditional>

      ))

     }

    </Grid>

  );

這樣,enhancedSections.map 函數將返回每個增強部分的組件,并且渲染應該成功。


在添加Conditional組件之前它工作的原因是因為每個 if-else 語句都返回一個組件,并且該組件被 map 函數使用。


查看完整回答
反對 回復 2022-01-07
  • 3 回答
  • 0 關注
  • 197 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號