React-Javascript和JSX的条件呈现，条件包装组件

我试图有条件地呈现多个共享组件，但出现错误：

第182:9行：应为赋值或函数调用，而不是saw 表达式没有未使用的表达式

下面的代码在没有包装器组件的情况下可以完美地工作。然而，一个新的客户要求是，在达到特定于组件的if-else语句之前，在所有组件上放置一个更高级别的条件。我想创建一个包装器组件，而不是用更多的条件膨胀现有的if-else语句或复制代码

为了恰当地呈现这一点，我使用匿名箭头函数包装了if-else语句。但错误依然存在

任何帮助都将不胜感激

... 回来 {enhancedSections.mapsection，索引=>{ { => { if//if-else语句系列在没有包装器的情况下完美呈现 section.style==单选&& section.section\u display\u name==selectedSection { 回来 ; }否则如果 section.style==布尔值&& section.section\u display\u name==selectedSection { 回来 ; }否则如果 …//这里有更多条件CMP }} } } ; 的目的是仅在shouldRender返回true时渲染其props.childrender

const Conditional=props=>{ const shouldRender=path=>{ 如果！道具路径{ 返回true； }否则{ 返回错误 } } 回来 shouldRender？props.childrender:null ; } 导出默认条件； 提供给条件的子项是一个函数。要将子级渲染为functionrender props，您应该像这样执行它

shouldRender() ? props.children() : null

children是一个函数，您只需要调用children

例如：

编辑：

---

忘了再提一件事-在shouldRender函数中，您指定了路径，但从未使用它，因为它在您的道具中，您可以删除它。

我认为问题在于您的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函数将返回每个增强部分的组件，渲染应该会成功

它在添加条件组件之前工作的原因是，每个if-else语句都返回一个组件，并且映射函数使用该组件

希望这有帮助

编辑：我添加了在codesandbox中重新创建您的行为的示例：

而不是返回真等，只是返回！道具。路径就足够了。