ReactJs中的导航ul标记绑定错误

Question

我是ReactJs的新手。我正在尝试创建一个电子商务网站，并创建了导航。但我面临一个特定的问题。

正如您从屏幕截图中看到的那样，我的ul标签正在重复，这不应该是场景。

我正如我所实现的那样分享下面的代码。

顶部Navigation.js

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';



class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
            <ul className="dropdown-content">
              <SubMenu below={navList.catalogGroupView} />
            </ul>


          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

subMenu.js

import React, { Component } from 'react';
import SubListMenu from './subListMenu';


class SubMenu extends Component {
    render() {
        const { below } = this.props;
        return below.map(sub => {

            return (

                <React.Fragment>

                    <li key={sub.uniqueID}>

                        <a>{sub.name}</a>

                        {
                            <ul className="sub-menu">
                                {sub.catalogGroupView !== undefined && <SubListMenu subBelow={sub.catalogGroupView} />}
                            </ul>


                        }

                    </li>

                </React.Fragment>

            )
        })

    }

}

export default SubMenu;

subListMenu.js

import React, { Component } from 'react';


class SubListMenu extends Component {

    render() {
        const { subBelow } = this.props;
        console.log(subBelow)
        return subBelow.map(subl => {

            return (


                <li key={subl.uniqueID}><a>{subl.name}</a></li>




            )
        })

    }

}

export default SubListMenu;

index.css

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;

}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}
.dropdown-content li:hover .sub-menu { 

  display: block; 

}

img{ 
    width:100%;
  }

每当我在控制台窗口中看到我的代码时，ul标记就会重复。我不知道我在哪里弄错了。有人可以指导我。或者深入了解如何处理该问题。

Answer 1

您的ul位于mainCategory.map内部，因此将为每个映射项生成新的ul。

return <ul className="header"> {mainCategory.map(funtion)}</ul>将产生一个ul

Answer 2

您将在地图中返回<ul>元素。

 return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
            <ul className="dropdown-content">
              <SubMenu below={navList.catalogGroupView} />
            </ul>


          </li>
        </ul>

      )

    })

  }

将地图包裹在<ul>中，如下所示：

<ul className="header">
    {mainCategory.map(navList => 
        (
            <li key={navList.uniqueID}>
                <a className="dropbtn ">{navList.name} </a>
                <ul className="dropdown-content">
                    <SubMenu below={navList.catalogGroupView} />
                </ul>
            </li>
        )
    })}
    }
</ul>

Answer 3

因为你的ul在map里面。您的渲染方法应如下所示：

render() {
  const { mainCategory } = this.state;
  return (
    <ul className="header">
      {
        mainCategory.map(navList => (
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
            <ul className="dropdown-content">
            <SubMenu below={navList.catalogGroupView} />
            </ul>
          </li>
        ))
      }
    </ul>
  )
}