javascript - 如何仅触发 .map 内创建的一堆其他下拉菜单中的一个下拉菜单

Question

显然，这是一个非常菜鸟的问题，但我被困住了，所以请帮忙!

在我的 MenuWithDropdown 组件中，我创建了一堆下拉菜单。下拉列表应使用handleClick() 函数触发。我想要实现的目标通常是在 this.state.isActive 和三元运算符的帮助下实现的:

className={this.state.isActive ? "dropdown is-active" : "dropdown"}

但是，我不明白怎么可能只触发一个下拉菜单(例如数字 3)。我应该制作 state.isActive1、state.isActive2、state.isActive3 并稍后在 handleClick(key) 中以某种方式访问​​它们吗？或者我应该访问下拉菜单的关键属性，它通过 map 获取，例如 if (Dropdown.key === 3) setState(isActive:true)

class MenuWithDropdown extends React.Component {
  state = {
    isActive: false
  };

  render() {
    const { Menu } = this.props;

    const items = Menu.map((menuitem, key) => (
      <Fragment key={key}>
        <hr className="dropdown-divider" />

        <div key={key} className="dropdown is-left">
          <div className="dropdown-header">
            <NavLink to={menuitem.url}>
              <span>{this.context.t(menuitem.name)}</span>
            </NavLink>

            <FontAwesomeIcon icon="chevron-down" size="2x" />
          </div>

          <div className="dropdown-menu">
            <DropdownItem children={menuitem.children} />
          </div>
        </div>
      </Fragment>
    ));
    return <Fragment>{items}</Fragment>;
  }

  handleClick = (e, key) => {
    e.preventDefault();
    this.setState({
      isActive: true
    });
  };
}

Answer 1

我设计这个菜单的方式基本上是这样的:
(查看此工作示例:https://stackblitz.com/edit/toggling-menus)

在我的应用程序组件中，我有一个 menus 状态，我在其中存储每个菜单的数据。在 componentDidMount 上，我生成菜单并通过 props 将状态传递给 MenusContainer。

 class App extends Component {
  constructor() {
    super();
    this.state = {
      menus: []
    };
  }
  componentDidMount(){
    const menus = [
      {
        id: 1,
        title: 'Menu one',
        content: 'some content for menu 1'
      },
      {
        id: 2,
        title: 'Menu two',
        content: 'some content for menu 2'
      },
      {
        id: 3,
        title: 'Menu three',
        content: 'some content for menu 3'
      }
    ];
    this.setState({menus})
  }
  render() {
    return (
      <div>
        <MenusContainer menus={this.state.menus}/>
      </div>
    );
  }
}

MenusContainer 将负责渲染菜单、迭代其 menus 属性并设置当前菜单。为此，它将具有 currentMenu 状态和 setMenu 方法，将它们作为 Prop 传递给从 props.menus 渲染的 DropdownMenu 子级。

export default class MenusContainer extends React.Component {
  constructor(props) {
    super();
    this.state = {
      currentMenu: -1,
    }
  }
  setMenu = (id) => {
    if(id === this.state.currentMenu) {
      this.setState({currentMenu: -1})
    } else {
      this.setState({currentMenu: id})
    }
  }
  render() {
    return <div id='container'>
      {this.props.menus.map((menu, i) => {
        return <DropdownMenu 
                  key={i} 
                  data={menu} 
                  currentItem={this.state.currentMenu} 
                  setMenuCallback={this.setMenu}
                  />
      })}
    </div>
  }
}

DropdownMenu 将知道(从 props 中)当前请求哪个菜单，并将触发一个方法，从其 props 中将自身设置为当前菜单。
请注意，菜单将 conditionally render其内容根据 props.currentItem。

export default class DropdownMenu extends React.Component {
  toggleSelf = () => {
    const {id} = this.props.data;
    this.props.setMenuCallback(id)
  }
  render() {
    return <div className='menu-item' onClick={this.toggleSelf}>
      <h1>{this.props.data.title}</h1>
      {
        this.props.currentItem === this.props.data.id ? 
          <div>{this.props.data.content}</div> : null
      }
    </div>
  }
}