reactjs中的嵌套if和map使用？答案

【问题标题】：Nested If and map use in reactjs?reactjs中的嵌套if和map使用？
【发布时间】：2019-01-19 08:41:06
【问题描述】：

这是我的以下代码：-

if(this.props.buttons && this.props.buttons.tabs && this.props.buttons.tabs.length) {
            this.props.buttons.tabs.map((button) => {
                return (
                    <TabsPanel label={button.labelKey} />
                        button.subtabs.map((subtab) => {
                            return(
                                <Tabs>
                                    <TabsPanel label={subtab.labelKey}></TabsPanel>
                                </Tabs>
                            )
                        })
                )
            });
    }

在运行以下代码时，它总是给出语法错误。

这是我得到的以下 JSON

    "tabs" : [ 
        {
            "labelKey" : "label1",
            "subtabs" : [ 
                {
                    "form" : {
                        "labelKey" : "subtab1"
                    }
                }, 
                {
                    "form" : {
                        "labelKey" : "subtab2"
                    }
                }
            ]
        }, 
        {
            "labelKey" : "label2"
        }
    ]

任何线索都会有所帮助。我现在陷入了死胡同。谢谢！

【问题讨论】：

“运行以下代码时，总是出现语法错误”
你在if之后有两个连续的{s。
@CertainPerformance 删除后它仍然无法正常工作。
@CertainPerformance 请给我们一些时间来解决问题。您正在非常快速地解决所有问题。 :p

标签： javascript reactjs

【解决方案1】：

这个问题不是很清楚。但这里有一些我认为可能的场景。

TabsPanel 组件接受 Tabs 作为子项：普拉宾的回答是正确的。（TabsPanel 和 Tabs 组件中缺少关键属性除外）
TabsPanel 组件和 Tabs 列表并排显示：

注意：一个有效的组件要么是一个单一的根，要么是一个其他有效组件的列表。

所以要么这是正确的。

this.props.buttons.tabs.map((button, index) => {
    return (
      <div key={index}>
        <TabsPanel label={button.labelKey} />
        {button.subtabs.map(subtab => {
          return (
            <Tabs key={subtab.labelKey}>
              <TabsPanel label={subtab.labelKey} />
            </Tabs>
          )
        })}
      </div>
    )
  })

或者这是正确的。

this.props.buttons.tabs.map((button, index) => {
  return [
    <TabsPanel label={button.labelKey} key={index} />,
    {
      ...button.subtabs.map(subtab => {
        return (
          <Tabs key={subtab.labelkey}>
            <TabsPanel label={subtab.labelKey} />
          </Tabs>
        )
      })
    }
  ]
})

另外，请注意 Tabs 和 TabsPanel 组件中的 key 属性。这很重要，我让你自己去发现它的重要性。

【讨论】：

【解决方案2】：

  return (
  <div>
    {this.props.buttons && this.props.buttons.tabs && this.props.buttons.tabs.length &&
      this.props.buttons.tabs.map(button => {
        return (
          <TabsPanel label={button.labelKey}>
            {button.subtabs.map(subtab => {
              return (
                <Tabs>
                  <TabsPanel label={subtab.labelKey} />
                </Tabs>
              );
            })}
          </TabsPanel>
        );
      })}
  </div>
);

试试这个应该可以解决你的问题

【讨论】：

上述解决方案不起作用。 tab.map 将无法工作，因为未定义选项卡。因此，我将其更改为 this.props.buttons.tabs.map 也无法渲染任何内容。 @prabin badyakar