如何成功为<TreeNode>设置引用

Question

我无法向TreeNode元素添加引用，因为它是功能组件。

我无法包装每个TreeNode，因为Tree只接受TreeNode作为子节点，因此无法使用React.forwardRef。

然后如何为TreeNode设置引用？

Answer 1

您不能直接为Tree.TreeNode分配引用。

但是，您可以通过Tree访问其引用：

nodeRef.current.tree.domTreeNodes

示例：

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

import { Tree } from 'antd';
import 'antd/dist/antd.css';

const { TreeNode } = Tree;

const App = () => {
  const nodeRef = useRef();

  useEffect(() => {
    console.log(nodeRef.current.tree.domTreeNodes);
  }, []);

  return (
    <Tree
      ref={nodeRef}
      checkable
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      defaultSelectedKeys={['0-0-0', '0-0-1']}
      defaultCheckedKeys={['0-0-0', '0-0-1']}
    >
      <TreeNode title="parent 1" key="0-0">
        <TreeNode title="parent 1-0" key="0-0-0" disabled>
          <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
          <TreeNode title="leaf" key="0-0-0-1" />
        </TreeNode>
        <TreeNode title="parent 1-1" key="0-0-1">
          <TreeNode
            title={<span style={{ color: '#1890ff' }}>sss</span>}
            key="0-0-1-0"
          />
        </TreeNode>
      </TreeNode>
    </Tree>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));