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() ? props.children() : null

Answer 2

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

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

编辑：忘了再提一件事——在你的“shouldRender”函数中，你指定了路径但你从不使用它，因为它在你的道具中，你可以删除它。

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 函数将返回每个增强部分的组件，并且渲染应该成功。

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