Есть ли способ придать другому поведению название и значок аккордеона, используя сокращенный синтакс? - PullRequest
Новая
       14

Есть ли способ придать другому поведению название и значок аккордеона, используя сокращенный синтакс?

0 голосов
/ 29 мая 2019

Мы используем Аккордеон Semantic 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

Отрицание перехода к «активной» структуре дало нам ошибку, утверждая, что data.active был доступен только для чтения. А нажатие на значок также запускает навигацию.

Тег работает при навигации только по заголовку, а не по значку. Но при нажатии на заголовок аккордеон все еще расширяется или сворачивается.

...