Javascript 下拉菜单无法在React中设计 import React，{Component}来自'React'； 从“axios”导入axios； 从“./DropdownMenu”导入下拉菜单； 类导航扩展了组件{ 状态={ topCategory:[] } componentDidMount（）{ axios.get（）http://localhost:3030/topCategory') 。然后（res=>{ log（res.data.express.catalogGroupView）； 这是我的国家({ topCategory:res.data.express.catalogGroupView }) }) } render（）{ const{topCategory}=this.state； 常量navList=topCategory.map（navList=>{ 返回( {navList.name} ) }) 返回( {navList} ) } } 导出默认导航；

import React，{Component}来自'React'；
类下拉菜单扩展组件{
构造函数（）{
超级（）；
此.state={
showMenu:false，
};
this.showMenu=this.showMenu.bind（this）；
this.closeMenu=this.closeMenu.bind（this）；
}
显示菜单（事件）{
event.preventDefault（）；
this.setState（{showMenu:true}，（）=>{
document.addEventListener（'click'，this.close菜单）；
});
}
关闭菜单（）{
this.setState（{showMenu:false}，（）=>{
document.removeEventListener（'单击'，此.Close菜单）；
});
}
render（）{
返回(
{
this.state.showMenu
? (
菜单项1
菜单项2
菜单项3
)
: (
无效的
)
}
);
}
}
导出默认下拉菜单；

---

我是react新手，在react js中创建了一个导航菜单。单击导航项目时，应出现一个下拉列表。但在我的情况下，它不起作用，主要是下拉部分。有人能在这方面指导我吗。我尝试过很多方法，但似乎都不管用。如果有人能给我一些帮助或至少给我看一看，我将非常感激

我看到您的代码中有几个问题

在导航组件中，我看到onClick是this.showMenu，但没有绑定到该组件的函数

您可能需要阅读并理解状态和道具是如何工作的

希望下面的代码片段能有所帮助

class下拉菜单扩展了React.Component{
构造函数（）{
超级（）；
此.state={
};   
}
render（）{
返回(
{
这个。道具。展示菜单
? (
菜单项1
菜单项2
菜单项3
)
: (
无效的
)
}
);
}
}
类导航扩展了React.Component{
状态={
topCategory:[]
}
componentDidMount（）{
这是我的国家({
topCategory:[{uniqueID:1000，名称：'Nav Item 1'}，{uniqueID:1001，名称：'Nav Item 2'}，{uniqueID:1002，名称：'Nav Item 3'}]
})
}
render（）{
const{topCategory}=this.state；
const navList=topCategory.map（navListItem=>{
返回(
（this.setState（{selected:e.target.innerText}））}>{navListItem.name}
{
返回this.state.selected==navListItem.name}（）}/>
)
})
返回(
{navList}
)
}
}
ReactDOM.render（，document.querySelector（#app））

什么不起作用？你到底有什么问题？这会给你一个错误吗？我在理解代码警告时遇到一些困难：数组或迭代器中的每个子级都应该有一个唯一的“key”属性。了解更多信息。在下拉菜单中（在topNavigation.js:30）在导航中（在Main.js:20）在div中（在Main.js:17）在Main中（在index.js:9）它显示错误…但内容没有呈现…它只是空白…假设我必须创建一个下拉列表，那么我将如何处理我认为你必须更好地阅读道具如何工作以及如何将道具传递给子元素，你那里的代码没有很好地组织我会说，除非我看错了，否则li组件被封装在组件下，它不会呈现…好的。所以通过阅读有关道具的内容，它可以解决我的问题

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



class Navigation extends Component {

    state = {
      topCategory: []
    }

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

  render() {

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

    return (

        <DropdownMenu>
        <li key={navList.uniqueID}> <button onClick={this.showMenu}>{navList.name}</button></li>
        </DropdownMenu>
      )

  })

  return (
    <div>
    <ul className="header">{navList}</ul>
    </div>

  )

  }


  }

  export default Navigation;

import React, { Component } from 'react';



class DropdownMenu extends Component {

  constructor() {
    super();

    this.state = {
      showMenu: false,
    };

    this.showMenu = this.showMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  showMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: true }, () => {
      document.addEventListener('click', this.closeMenu);
    });
  }

  closeMenu() {
    this.setState({ showMenu: false }, () => {
      document.removeEventListener('click', this.closeMenu);
    });
  }
  render() {

    return (
        <div>
        {
          this.state.showMenu
            ? (
              <div className="menu">
                <button> Menu item 1 </button>
                <button> Menu item 2 </button>
                <button> Menu item 3 </button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );
  }
}

export default DropdownMenu;