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

Question

我正在嘗試有條件地渲染幾個共享組件，但出現錯誤：

第 182:9 行：需要一個賦值或 function 調用，而是看到一個表達式 no-unused-expressions

如果沒有<Conditional />包裝器組件，以下內容可以完美運行。 然而，一個新的客戶要求是在到達特定於組件的 if-else 語句之前，對所有組件都放置一個更高級別的條件。 我想創建一個包裝器組件<Conditional />而不是用更多條件或重復代碼來誇大現有的 if-else 語句。

為了恰當地呈現這一點，我用匿名箭頭 function 包裹了 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>
  );

<Conditional/>的目的是僅在shouldRender()返回true時渲染它的props.children 。

const Conditional = props => {

  const shouldRender = path => {
    if(!props.path){
      return true;
    }else{
      return false
    }
  }

  return (
    shouldRender() ? props.children : null
  );
}

export default Conditional;

Answer 1

提供給Conditional的children是function 。 要將孩子渲染為 function （渲染道具），您應該像這樣執行它

shouldRender() ? props.children() : null

Answer 2

children是一個 function，你只需要調用children 。

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

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

Answer 3

我認為問題在於您的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 function 將返回每個增強部分的組件，並且渲染應該成功。

它在添加條件組件之前工作的原因是因為每個 if-else 語句都返回一個組件，並且該組件被 map function 使用。

希望這可以幫助！

編輯：我添加了在代碼和框中重新創建您的行為的示例：

失敗的代碼（沒有返回語句）

工作示例（返回元素時）