如何在 Reactjs 中运行嵌套地图？

Question

如何使用 map 函数返回不同的组件。如何在地图函数中应用条件

我试图返回一个组件，如果subMain 为真，则返回该部分组件，如果subMain 为假，则返回该部分组件。

但这里只是结构中的错误。错误显示在这里!subMain

更新：我尝试了另一种方法，但这会在第二次返回和 const MainPath 中引发错误

            {states &&            
            states.map(({ Main }) => (
                Main.map(({component , subMain}) => (
                    const MainPath = `/${component}`
                    const MainComponent = `${component}`
                    subMain ? subMain.map(({ component }) => {
                        
                            const Path = `/${component}`
                            const Component = `${component}`
                            return (
                                <Protected
                                path={Path}
                                component={Component}
                                exact
                            />
                            )
                        }):
                            return (
                                <Protected
                                path={MenuPath}
                                component={MenuComponent}
                                exact
                            />
                            )
                                                    
                ))
            ))
        }

Answer 1

编辑：更新问题后，我认为只有一些语法错误和缺少返回语句

您正在运行 2 个表达式，而不仅仅是一个返回值。你应该像这样使用三元组

  {states &&            
        states.map(({ Main }) => (
            Main.map(({component , subMain}) => {
                const MainPath = `/${component}`
                const MainComponent = `${component}`
                return subMain ? subMain.map(({ component }) => {
                    
                        const Path = `/${component}`
                        const Component = `${component}`
                        return (
                            <Protected
                            path={Path}
                            component={Component}
                            exact
                        />
                        )
                    }):
                  (
                      <Protected
                         path={MenuPath}
                         component={MenuComponent}
                         exact
                      />
                  )
                                                
            })
        ))
    }