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

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&nbsp; props.itemClicked<Menu.ItemIcon id={index} style={{ right: "0px", position: "absolute" }} className={itemClicked === index && item.children ? 'rotate' : ''}>&nbsp;

Answer 2

您应该使用组件的状态来检查菜单项是否打开。另外，我删除了不必要的depth状态。希望这能有所帮助。const StackedMenu = ({items, depth, ...otherProps}) => {&nbsp; let [chevronRotation, setChevronRotation] = useState('');&nbsp; let [itemClicked, setItemClicked] = useState(otherProps.itemClicked);&nbsp; return (&nbsp; &nbsp; <Menu&nbsp; &nbsp; &nbsp; primary&nbsp; &nbsp; &nbsp; defaultActiveIndex={0}&nbsp; &nbsp; &nbsp; activeIndex={itemClicked}&nbsp; &nbsp; &nbsp; vertical&nbsp; &nbsp; &nbsp; pointing&nbsp; &nbsp; &nbsp; style={{width: '100%'}}>&nbsp; &nbsp; &nbsp; {items.map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={(e, data) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setItemClicked(data.index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setChevronRotation(`rotate`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointing="start">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Menu.ItemContent&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={depth > 0 ? {paddingLeft: '0.5em'} : null}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.content}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Menu.ItemContent>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.children ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Menu.ItemIcon&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{right: '0px', position: 'absolute'}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={itemClicked === index ? 'rotate' : ''}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ChevronEndMediumIcon />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Menu.ItemIcon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MenuItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {itemClicked === index && item.children ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackedMenu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items={item.children}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; depth={depth + 1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemClicked={0}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </Menu>&nbsp; );};

Answer 3

使用“代码分割”。只需创建一个单独的组件并将状态放置在该组件内即可。这会为列表中的每个项目创建一个单独的状态，以便 onclick 仅遵循该项目。<div><Mycomponent /></div>const Mycomponent = ()=>{&nbsp; &nbsp; const [active, setactive] = useState(false);return (<div><div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; boxShadow: active&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? "4px 3px 8px 0px rgba(1, 156, 48, 0.3)"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : "initial"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setactive(!active)}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {message.content}&nbsp; &nbsp; &nbsp; &nbsp; </div><div>);