css - ReactJs中的导航ul标签绑定(bind)错误

Question

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

正如您从屏幕截图中看到的，我的 ul 标签在重复，这不应该是这种情况。

我将分享下面的代码作为我实现的代码。

topNavigation.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;

子菜单.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;

子列表菜单.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;

索引.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