React中如何通过props动态控制Kendo PanelBar及子项的展开/收起状态

开发者阿泽

2026-10-2

Kendo React PanelBar 动态控制展开状态失效解决方案

失效原因及修复步骤：

数组引用未更新
如果你是通过push()、splice()等原地修改数组的方法更新expanded属性，原数组的引用没有发生变化，React的Props浅比较无法检测到变更，组件不会触发重渲染。
修复方式：每次修改expanded时返回全新数组，示例如下：
```
// 新增展开项
setExpanded(prevState => [...prevState, newItemKey])
// 收起指定项
setExpanded(prevState => prevState.filter(key => key !== targetItemKey))
```

未开启完全受控模式
PanelBar的受控模式要求你同时传入expanded属性和onExpand事件处理函数，即使你是通过外部导航控制展开状态，也需要绑定onExpand同步用户直接点击PanelBarItem触发的状态变更，避免内部状态和外部Props冲突。
修正后的组件示例：

export default function Vehicles(props) {
    const handlePanelExpand = (e) => {
      // 将PanelBar返回的最新展开数组同步到上层状态
      props.updateExpanded(e.expanded)
    }
    return (
      <PanelBar
        style={props.style}
        expanded={props.expanded}
        onExpand={handlePanelExpand}
      >
      {/* 多个PanelBarItem */}
    </PanelBar>
    )
}