React中如何获取Tree组件的Ref引用？

1. 先确认组件是否支持直接传ref #

如果是你自己封装的Tree组件，必须用React.forwardRef转发ref，不然外部拿不到内部Tree的实例：

// 封装的Tree组件
const CustomTree = React.forwardRef((props, ref) => {
  return <Tree ref={ref} {...props} />;
});

// 使用时
const treeRef = useRef(null);
<CustomTree ref={treeRef} value={nodes} ... />

2. 第三方UI库的Tree组件处理 #

大部分主流UI库（比如AntD、Element React）的Tree组件本身支持ref传递，但要注意：

• 直接用useRef创建ref，组件挂载后就能拿到实例，还能调用组件自带的方法（比如展开/收起节点）：

const treeRef = useRef(null);

// 示例：调用展开所有节点
const expandAllNodes = () => {
  treeRef.current?.expandAll();
};

return (
  <Tree ref={treeRef} value={nodes} selectionMode="single" selectionKeys={null} onSelectionChange={onNodeSelect} />
);

• 少数组件可能用innerRef这类属性接收ref，而不是直接用ref，如果直接传ref拿不到，去查组件文档确认属性名。

3. 确保ref的使用时机正确 #

函数组件里要等组件挂载后再访问ref.current，可以用useEffect：

const treeRef = useRef(null);

useEffect(() => {
  if (treeRef.current) {
    // 这里可以操作Tree实例
    console.log(treeRef.current);
  }
}, []);

类组件里用createRef，在componentDidMount里访问：

class MyPage extends React.Component {
  treeRef = React.createRef();

  componentDidMount() {
    console.log(this.treeRef.current);
  }

  render() {
    return (
      <Tree ref={this.treeRef} value={nodes} selectionMode="single" selectionKeys={null} onSelectionChange={this.onNodeSelect} />
    );
  }
}

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