Question

我想根据菜单中点击的项目在Sidebar.Pusher中显示动态内容。这是我的代码 -

<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>

任何线索都将受到高度赞赏。

Answer 1

如果我正确理解了这个问题，可以采用一些可能的解决方案。在我的一个项目中，我将其与React Router一起使用，因此在<Sidebar />组件中我有<Menu.Item as={Link} to='/path' />，然后<Route path='/path' />位于<Switch />语句中<Sidebar.Pusher /> 1}}。

如果你想在没有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>
)

使用semantic-ui-react

1 个答案: