Question

显而易见的是，标题声明了它。

我有一个MenuContainer类组件，其中包含一个menuList项目表，我将其作为道具传递给子功能组件，将其映射到另一个子元素，该元素会吐出一个菜单。这没什么特别的。
菜单仅从道具中呈现{icon} 在这个父容器中，我还有另一个名为ItemName的子元素，它应该从状态传递itemName props（默认为空字符串）。

棘手的部分是this.state.itemName的值应该使用我将鼠标悬停在Menu / MenuItem组件中的任何菜单项的{name}进行更新。
因此，MenuItem组件仅使用图标呈现，当我将鼠标悬停在它们上面时，我需要{name}（来自menuList表）才能显示在ItemName组件中。

父级 - MenuContainer

class MenuContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      itemName: ''
    };
  };

  menuList = [
    {name: 'chat', icon: 'talking-heads'},
    {name: 'people', icon: 'loads-of-heads'},
    {name: 'settings', icon: 'cogwheel'},
    {name: 'potatoes', icon: 'one-huge-potato'}
  ];

  getItemName = () => {
    this.setState({ itemName: *menuList.name of the menu item that I hover over* })
  }

  render() {
    return(
      <>
        <Menu menuList={this.menuList} />
        <ItemName itemName={this.state.itemName} />
      </>
    )
  }
}

儿童1 - 菜单

const menu = (menuList) => (
  <>
    {menuList.map((item) => (
      <MenuItem {...item} menuList={menuList} key={item.name} />
    ))}
  </>
);

儿童2 - MenuItem

const menuItem = ({ name, icon }) => (
  <div data-item-name={name}>
    {icon}
  </div>
);

儿童3 - ItemName

const itemName = (itemName) => (
  <p>{ itemName }</p>
);

我的想法是我应该让MenuItem成为一个类组件，并在其中创建一个方法，将{name}传递给父级，在那里它将被getItemName方法拦截，然后getItemName方法将更新状态，但我已经完成了如何实现这一目标的想法。

我应该使用Redux吗？或者也许这是一种更简单的方法，我没有想过？

Answer 1

在父级中执行menuList.map(item)，然后转到菜单a 当项目悬停时将调用的回调。这个 callBack将该项目作为参数。
更改Menu以仅显示一个菜单项。当该项目悬停时，将以项目作为参数调用回调。设置一个保存此项目的状态变量。
menuItem。

Answer 2

<强> MenuContainer中

#!/usr/bin/env bash

merge_training=false
reset_database=false

branchname="$1"
shift 1

while getopts ":tr" opt; do
  case "${opt}" in
    t ) # process option t
       echo "one"
       merge_training=true
       ;;
    r ) # process option r
       echo "two"
       reset_database=true
       ;;
   esac
done

echo "$reset_database"
echo "$merge_training"

菜单

class MenuContainer extends Component { onMouseOverEvent(name){ this.setState({ itemName: name }) } render() { return( <> <Menu menuList={this.menuList} onMouseOverEvent = {this.onMouseOverEvent}/> //passed event hanlder onMouseOverEvent <ItemName itemName={this.state.itemName} /> </> ) } }

<强>菜单项

const Menu = ({menuList,onMouseOverEvent}) => ( <> {menuList.map((item) => ( <MenuItem {...item} menuList={menuList} key={item.name} onMouseOverEvent={onMouseOverEvent}/> //passed onMouseOverEvent as it is here ))} </> );

如何使用React

2 个答案: