React - Javascript 和 JSX 的条件渲染，条件包装器组件

Question

我正在尝试有条件地渲染几个共享组件，但出现错误：

第 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>

  );

Answer 1

将children提供给Conditional一个function。要将孩子渲染为函数（渲染道具），您应该像这样执行它shouldRender()&nbsp;?&nbsp;props.children()&nbsp;:&nbsp;null

Answer 2

children是一个函数，你只需要调用children.一个例子：https&nbsp;:&nbsp;//codesandbox.io/s/focused-cloud-sql0d编辑：忘了再提一件事——在你的“shouldRender”函数中，你指定了路径但你从不使用它，因为它在你的道具中，你可以删除它。

Answer 3

我认为问题在于您的enhancedSections.map实际上并没有返回任何东西。return (&nbsp; &nbsp; <Grid container>&nbsp; &nbsp; &nbsp; {enhancedSections.map((section, index) => (&nbsp; &nbsp; &nbsp; &nbsp; <Conditional&nbsp; &nbsp; // this is line 182&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={section.conditional ? section.conditional.param_name : null }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section={section}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (&nbsp; &nbsp;// these series of if-else statements renders perfectly without the <Conditional/> wrapper&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section.style == "single_select" &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section.section_display_name == selectedSection&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SingleSelect&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={section.definition.display_name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayName={section.definition.display_name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section.definition.description&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? section.definition.description&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={{ id: id, field: `${section.field}` }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section.style == "boolean" &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section.section_display_name == selectedSection&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={section.definition.display_name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayName={section.definition.display_name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description={section.definition.description}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={{ id: id, field: `${section.field}` }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp;// more conditional cmps here&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; </Conditional>&nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; </Grid>&nbsp; );这样，enhancedSections.map 函数将返回每个增强部分的组件，并且渲染应该成功。在添加Conditional组件之前它工作的原因是因为每个 if-else 语句都返回一个组件，并且该组件被 map 函数使用。