Отображение динамического содержимого при нажатии на элемент меню, используя semantic-ui-реагировать - PullRequest
Новая
       17

Отображение динамического содержимого при нажатии на элемент меню, используя semantic-ui-реагировать

0 голосов
/ 07 мая 2018

Я хочу отображать динамическое содержимое на боковой панели. Пушер на основе элемента, выбранного в меню. Вот мой код - 

<Sidebar.Pushable  >
      <Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
        <Menu.Item name='home' >
          <Icon name='tasks' />
          Manage categories
        </Menu.Item>
        <Menu.Item name='home' >
          <Icon name='tasks' />
          Manage products
        </Menu.Item>
      </Sidebar>
      <Sidebar.Pusher >
        <Segment basic>
          Display Dynamic content
        </Segment>
      </Sidebar.Pusher>

Любые выводы будут высоко оценены.

1 Ответ

0 голосов
/ 09 мая 2018

Если я правильно понимаю вопрос, есть несколько возможных решений. В одном из моих проектов я использую его с React Router, поэтому в компоненте <Sidebar /> у меня есть <Menu.Item as={Link} to='/path' />, а затем <Route path='/path' /> в операторе <Switch /> в <Sidebar.Pusher />.

Если вы хотите изменить визуализированные компоненты без React Router, вот пример того, как я это реализовал. 

import React, { Component } from 'react'
import { Sidebar, Segment, Menu } from 'semantic-ui-react'    

export default class SideNav extends Component {

    constructor(props) {
        super(props)

        this.state = {
            renderTab: 'home'
        }
    }

    changeTab(tabName) {
        this.setState({ renderTab: tabName })
    }

    render() {
        const { renderTab } = this.state
        return (
            <Sidebar.Pushable as={Segment}> 
                <Sidebar as={Menu} visible vertical>
                    <Menu.Item onClick={() => this.changeTab('home')} as='a' name='home'>
                        Home
                    </Menu.Item>
                    <Menu.Item onClick={() => this.changeTab('about')} as='a' name='about'>
                        About
                    </Menu.Item>
                </Sidebar>
                <Sidebar.Pusher> 
                    <RenderedContent tabName={renderTab} />
                </Sidebar.Pusher> 
            </Sidebar.Pushable> 
        )
    }
}

const RenderedContent = ({ tabName }) => {
    if (tabName === 'home') {
        return <Home />
    }
    if (tabName === 'about') {
        return <About />
    }
}

const Home = () => (
    <div>This is the home page</div>
)

const About = () => (
    <div>This is the about page</div>
)
...