Question

从JSON构建导航。如果一个项目有孩子，我需要围绕孩子们的循环运行一些前后代码。我的if语句有效，所有单曲都正确创建。它会创建下拉组件，但内循环不会运行。它以html的形式阅读。

＆＃13;

render() {
    return menuLocal.items.map((menu, i) => {
        return (
          <div key={i}>            
            {(menu.children) ? (
                    <UncontrolledDropdown nav inNavbar>
                        <DropdownToggle nav caret>
                            {menu.title}
                        </DropdownToggle>
                    <DropdownMenu right>

                    menu.children.map((children, i) => {
                        <NavItem key={'children-'+i}>
                            <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                        </NavItem>
                    })

                    </DropdownMenu>
                </UncontrolledDropdown>
              
            ): 
                <NavItem>
                    <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                </NavItem>
            }
          </div>
        )
      })

    }

＆＃13;

这是一个显示Nav中问题的实时链接。 http://attorneytemplate.netlify.com/

Answer 1

尝试用大括号包装代码。必须包装JSX中的Javascript代码。

并在内部地图上添加一个返回。

{
menu.children.map((children, i) => {
                    return (<NavItem key={'children-'+i}>
                        <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                    </NavItem>);
                })
}

Answer 2

这里有大括号。要么返回对象，要么以这种方式进行 -

 menu.children.map((children, i) => 
                        <NavItem key={'children-'+i}>
                            <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                        </NavItem>
                    )

删除那些卷曲的括号。因为它仍然是{}内的一个对象，直到你返回它为止。

React - 循环内循环

2 个答案: