react点击tree树形控件切换表格数据

要实现点击树形控件切换表格数据，需要以下步骤：

在组件中定义树形控件和表格组件，并将它们放在同一层级，这样它们可以共享相同的数据源。
在树形控件中定义onSelect方法，在点击树节点时触发该方法。在该方法中，获取被选中的节点的数据，并将它传递给表格组件。
在表格组件中，定义一个接收数据的props，当接收到新的数据时，根据数据渲染表格。

以下是一个简单的示例代码：

import React, { useState } from "react";
import { Tree, Table } from "antd";

const treeData = [
  {
    title: "Node 1",
    key: "1",
    children: [
      {
        title: "Node 1-1",
        key: "1-1",
      },
      {
        title: "Node 1-2",
        key: "1-2",
      },
    ],
  },
  {
    title: "Node 2",
    key: "2",
  },
];

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
  },
];

const App = () => {
  const [selectedNode, setSelectedNode] = useState(null);

  const onSelect = (selectedKeys, info) => {
    setSelectedNode(info.node);
  };

  return (
    <div style={{ display: "flex" }}>
      <Tree
        showLine
        defaultExpandedKeys={["1"]}
        treeData={treeData}
        onSelect={onSelect}
      />
      <Table
        style={{ marginLeft: 20 }}
        columns={columns}
        dataSource={selectedNode ? data : []}
      />
    </div>
  );
};

export default App;

在这个示例中，当用户在树形控件中选择一个节点时，会触发onSelect方法，该方法会将被选中的节点信息保存在selectedNode状态中。在表格组件中，我们使用了selectedNode状态来决定要显示哪些数据。如果没有选中节点，则显示一个空表格。如果选中了一个节点，我们就从数据源中获取相应的数据，并将其传递给表格组件来渲染表格。