将样式应用于特定的反应地图项

Question

我想在循环映射的特定元素上应用一个类。const items = [    {        key: 'Menu1key',        content: 'Menu 1',    },    {        key: 'Menu2',        content: 'Menu2key'    },    {        key: 'Menu3Key',        content: 'Menu3',        children: [{            key: 'SubMenu3Key',            content: 'SubMenu3',        },        {            key: 'SubMenu5Key',            content: 'SubMenu5'        }]    },    {        key: 'Menu4Key',        content: 'Meu4',        children: [{            key: 'SubMenu4Key',            content: 'SubMenu4',        },        {            key: 'SubMenu5Key',            content: 'SubMenu5'        }]    }]const StackedMenu = (props) => {    let [chevronRotation, setChevronRotation] = useState('')    let [itemClicked, setItemClicked] = useState(props.itemClicked);    let [depth, setDepth] = useState(props.depth)    return (<Menu primary defaultActiveIndex={0} activeIndex={itemClicked} vertical pointing style={{ width: '100%' }}>        {props.items.map((item, index) => {            return (<>                <MenuItem onClick={(e, data) => { setItemClicked(data.index); setChevronRotation(`rotate`) }} index={index} key={index} pointing="start" >                    <Menu.ItemContent style={depth > 0 ? { paddingLeft: '0.5em' } : null} >{item.content}</Menu.ItemContent>                    {item.children ?                        (<Menu.ItemIcon id={index} style={{ right: "0px", position: "absolute" }} className={props.itemClicked === index && item.children ? 'rotate' : ''}>                            <ChevronEndMediumIcon />                        </Menu.ItemIcon>) : null}                </MenuItem>                {itemClicked === index && item.children ? <div><StackedMenu items={item.children} depth={depth + 1} itemClicked={0} /></div> : null}            </>)        })}    </Menu>)}我使用递归组件来创建子菜单。实际上，当我打开菜单时，所有 V 形都会展开，我想要的是只有单击的项目的 V 形才会展开。

Answer 1

您的问题是您正在设置一个本地状态来控制它是否应该打开，但然后检查单击项目的道具。

更改这一行：

// I removed props from  props.itemClicked

<Menu.ItemIcon id={index} style={{ right: "0px", position: "absolute" }} className={itemClicked === index && item.children ? 'rotate' : ''}> 

Answer 2

您应该使用组件的状态来检查菜单项是否打开。另外，我删除了不必要的depth状态。希望这能有所帮助。

const StackedMenu = ({items, depth, ...otherProps}) => {

  let [chevronRotation, setChevronRotation] = useState('');

  let [itemClicked, setItemClicked] = useState(otherProps.itemClicked);

  return (

    <Menu

      primary

      defaultActiveIndex={0}

      activeIndex={itemClicked}

      vertical

      pointing

      style={{width: '100%'}}>

      {items.map((item, index) => {

        return (

          <>

            <MenuItem

              onClick={(e, data) => {

                setItemClicked(data.index);

                setChevronRotation(`rotate`);

              }}

              index={index}

              key={index}

              pointing="start">

              <Menu.ItemContent

                style={depth > 0 ? {paddingLeft: '0.5em'} : null}>

                {item.content}

              </Menu.ItemContent>

              {item.children ? (

                <Menu.ItemIcon

                  id={index}

                  style={{right: '0px', position: 'absolute'}}

                  className={itemClicked === index ? 'rotate' : ''}>

                  <ChevronEndMediumIcon />

                </Menu.ItemIcon>

              ) : null}

            </MenuItem>

            {itemClicked === index && item.children ? (

              <div>

                <StackedMenu

                  items={item.children}

                  depth={depth + 1}

                  itemClicked={0}

                />

              </div>

            ) : null}

          </>

        );

      })}

    </Menu>

  );

};

Answer 3

使用“代码分割”。只需创建一个单独的组件并将状态放置在该组件内即可。这会为列表中的每个项目创建一个单独的状态，以便 onclick 仅遵循该项目。

<div>

<Mycomponent />

</div>

const Mycomponent = ()=>{

    const [active, setactive] = useState(false);

return (

<div>

<div

          key={i}

          style={{

            boxShadow: active 

              ? "4px 3px 8px 0px rgba(1, 156, 48, 0.3)" 

              : "initial"

          }}

          onClick={() => setactive(!active)}

        >

          {message.content}

        </div>

<div>

);