React Sortable Tree如何实现所有节点默认展开（常用属性无效）

核心原理 #

react-sortable-tree 节点的展开状态由每个节点对象自身的expanded布尔属性控制，组件本身未提供全局默认展开的配置项，你之前尝试直接给组件传expand、toggleExpandedForAll属性不生效，是因为这两个都不是组件的props配置，其中toggleExpandedForAll是组件实例的调用方法。

方案1：预处理数据源（最稳定，推荐） #

在给组件传递树数据之前，递归遍历所有节点，统一添加expanded: true属性即可实现默认全展开。
示例代码：

// 递归遍历所有节点，添加默认展开属性
const getFullyExpandedTreeData = (nodes) => {
  return nodes.map(item => {
    const newItem = { ...item, expanded: true }
    if (Array.isArray(newItem.children) && newItem.children.length) {
      newItem.children = getFullyExpandedTreeData(newItem.children)
    }
    return newItem
  })
}

// 调用示例
const rawTreeData = [/* 你的原始树结构数据 */]
const processedTreeData = getFullyExpandedTreeData(rawTreeData)

组件调用示例：

<SortableTree
  treeData={processedTreeData}
  onChange={val => setProcessedTreeData(val)}
  // 其余你的自定义配置
/>

方案2：调用组件实例方法批量展开 #

如果不方便修改原始数据源，可以通过ref获取组件实例，调用实例的toggleExpandedForAll方法实现全展开。
示例代码：

import { useState, useRef, useEffect } from 'react'
import SortableTree from 'react-sortable-tree'

function MyTree() {
  const [treeData, setTreeData] = useState([/* 原始树数据 */])
  const treeInstanceRef = useRef(null)

  useEffect(() => {
    // 传入true表示全展开，传入false表示全折叠
    treeInstanceRef.current?.toggleExpandedForAll(true)
  }, [treeData]) // 如果是异步加载数据，依赖项填treeData保证数据加载后再执行

  return (
    <SortableTree
      ref={treeInstanceRef}
      treeData={treeData}
      onChange={newData => setTreeData(newData)}
      // 其余你的自定义配置
    />
  )
}

• 注意：如果你的树数据是异步请求获取的，需要确保数据赋值完成后再调用该方法，否则会不生效。

内容的提问来源于stack exchange，提问作者employee