Question

我们正在使用语义UI React的手风琴。一切都以简写形式编码。我们正在尝试将图标与标题分离以实现此行为： -单击图标可展开或折叠手风琴 -单击标题将导航到新页面，而无需修改手风琴状态。手风琴将位于侧边栏中，以浏览网站的主要内容。

**我们使用Google网站来最小化代码。使用ctrl键并单击以查看行为。

我们正在使用<Link>中的react-router-dom标签进行导航。但是，我们也尝试了as="a"和href道具。我们试图取消对onClick标题回调中“活动”道具的更改。

import * as React from 'react'
import { Link, RouteComponentProps } from 'react-router-dom'
import { Accordion, AccordionPanelProps, AccordionTitleProps, Menu, SemanticShorthandItem } from 'semantic-ui-react'

const level3Panels: SemanticShorthandItem<AccordionPanelProps>[] = [
    { key: 'panel-3a', title: { content: 'Level 3A', icon: 'wheelchair' } },
    { key: 'panel-3b', title: { content: 'Level 3B' }, content: { content: 'Max is nice and lets me call him a dummy.' } },
]

const Level3Content = (<Accordion.Accordion exclusive={false} panels={level3Panels} style={{ margin: '0 0 0 15px', padding: '0px' }} />)

const level1Panels: SemanticShorthandItem<AccordionPanelProps>[] = [
    {
        key: 'panel-1a',
        title: {
            content: (<Link to='https://www.google.ca/'>Google and stuff</Link >),
        },
        content: { content: Level3Content }
    },
    {
        key: 'panel-3a',
        title: {
            content: 'Google and stuff',
            as: 'a',
            href: 'https://www.google.ca/',
            onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: AccordionTitleProps) => { data.active = !data.active }
        },
        content: { content: Level3Content }
    }
]

const Level1Content = (
    <Accordion.Accordion exclusive={false} panels={level1Panels} style={{ margin: '0 0 0 15px', padding: '0px' }} />
)

const rootPanels = [
    { key: 'panel-1', title: 'Dummy List Page', content: { content: Level1Content } },
]

const Dummy = (props: RouteComponentProps): React.ReactElement => {

    return (
        <>
            <Menu.Item >
                <Accordion exclusive={false} panels={rootPanels}></Accordion>
            </Menu.Item>
        </>
    )
}

export default Dummy

否定对“ active”属性的更改，给我们一个错误，指出data.active为只读。点击图标还会触发导航。

标签仅在标题而非图标上进行导航。但是，单击标题时，手风琴仍会展开或折叠。

是否有一种使用速记合成器为手风琴的标题和图标赋予不同行为的方法？

0 个答案: