Question

这是我的以下代码：-

import requests
from bs4 import BeautifulSoup

url = "https://www.crummy.com/software/BeautifulSoup/bs4/doc/#a-list"
response = requests.get(url, headers={'User-Agent': 'Mozilla/5.0'})

soup = BeautifulSoup(response.text, "html.parser")

tags = ["div", "p", "li"]
content = soup.find_all(tags, text=True, recursive=False)

print(content)

在运行以下代码时，始终会出现语法错误。

这是我正在获取的以下JSON

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>
                            )
                        })
                )
            });
    }

任何线索都将有所帮助。我现在陷入僵局。谢谢！

Answer 1

问题不是很清楚。但是，我认为这是一些可能的情况。

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

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

所以这是正确的。

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属性。这很重要，我让你去发现它的重要性。

Answer 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>
);

尝试此方法可以解决您的问题

嵌套的if和map在reactjs中使用？

2 个答案: