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

首先，需要在 React 中使用一个适合的 Tree 组件，比如 react-treebeard 或 react-d3-tree 等。

然后，在 Tree 组件中添加 onClick 属性，当节点被点击时触发该函数。

在 onClick 函数中，需要将 Tree 的数据源进行更改，以反映当前选择的节点。这可以通过将 Tree 的数据源保存在 React 组件的 state 中来实现。

以下是一个基本的示例代码，使用 react-treebeard 组件和 setState 函数来切换数据：

import React, { Component } from 'react';
import Treebeard from 'react-treebeard';

class MyTree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        name: 'root',
        toggled: true,
        children: [
          {
            name: 'child1',
            toggled: true,
            children: [
              { name: 'grandchild1' },
              { name: 'grandchild2' }
            ]
          },
          { name: 'child2' },
          { name: 'child3' }
        ]
      }
    };
  }

  onToggle = (node, toggled) => {
    if (this.state.cursor) {
      this.setState({
        cursor: {
          active: false
        }
      });
    }

    node.active = true;

    if (node.children) {
      node.toggled = toggled;
    }

    this.setState({
      cursor: node
    });
  }

  render() {
    return (
      <Treebeard
        data={this.state.data}
        onToggle={this.onToggle}
      />
    );
  }
}

在 onToggle 函数中，我们首先检查是否存在已选中的节点，如果有则将其取消选中。然后将当前节点标记为选中状态，并更新其展开状态（如果存在子节点）。最后，将更新后的节点保存在组件的 state 中。

这样，当节点被点击时，Tree 组件将重新呈现，展示更新后的数据源。