Question

我有以下Kendo-UI PanelBar：

            <PanelBar expandMode="multiple">
                <PanelBarItem title={'Home'} />
                <PanelBarItem title={'something'} />
                <PanelBarItem title={'something1'} />
                <PanelBarItem title={'something2'} />
            </PanelBar>

但是一旦我添加了Link react-router-dom组件，我的PanelBarItem就失去了它的设计：

            <PanelBar expandMode="multiple">
                <Link to="/home"><PanelBarItem title={'Home'} /></Link>
                <PanelBarItem title={'something'} />
                <PanelBarItem title={'something1'} />
                <PanelBarItem title={'something2'} />
            </PanelBar>

代码正在运行，但我希望在我的代码继续工作的同时维护KendoUI设计。

Answer 1

我找到了解决方案：

基本上你需要创建函数并通过相同的PanelBar调用它。所以在课堂上你创建了以下函数：

 onSelect = (event) => {
    this.props.history.push(event.target.props.route);
}

然后将其指向PanelBar并为其指定每个PanelBarItem的路径：

<PanelBar expandMode="multiple" onSelect= {this.onSelect}>
            <PanelBarItem title={'Home'} route='/home'/>
            <PanelBarItem title={'something' route='/something} />
            <PanelBarItem title={'something1' route='/something1} />
            <PanelBarItem title={'something2' route='/something2} />
        </PanelBar>

有没有办法使用kendoui实现react-router-dom到反应项目而不会丢失样式？

1 个答案: