如何在react-sortable-tree中选中展开加号图标并实现点击逻辑

为什么你的原有代码失败 #

1. DOM选择器参数错误：document.getElementsByClassName(rst__expandButton) 里的类名需要加引号，应为'rst__expandButton'
2. 函数语法错误：const myFunction(()=>{ 应该写成const myFunction = () => {，且事件绑定逻辑错误（data.onclick(function) 不符合语法，且getElementsByClassName返回的是集合，需遍历绑定）
3. React生命周期问题：直接在render里执行DOM操作，此时组件可能还未渲染完成，DOM元素不存在，且组件更新后事件绑定会失效

推荐实现方式（React范式） #

利用react-sortable-tree提供的renderExpandButton属性自定义展开按钮，直接在React层面控制逻辑，无需操作原生DOM：

class YourTreeComponent extends React.Component {
  state = {
    treeData: [] // 你的树数据
  };

  handleExpandClick = (expandNode, node) => {
    // 这里添加你的自定义条件逻辑
    console.log('点击了节点：', node);
    // 执行组件原有展开/折叠逻辑
    expandNode();
  };

  render() {
    return (
      <SortableTree
        treeData={this.state.treeData}
        onChange={treeData => this.setState({ treeData })}
        renderExpandButton={({ node, isExpanded, expandNode }) => (
          <button
            className="rst__expandButton" // 保留组件原有样式类
            onClick={() => this.handleExpandClick(expandNode, node)}
          >
            {/* 保留原有图标逻辑，或者自定义图标 */}
            {isExpanded ? '-' : '+'}
          </button>
        )}
      />
    );
  }
}

备选方案（原生DOM操作，不推荐） #

如果必须用DOM操作，需在组件挂载/更新后执行，利用React生命周期方法保证DOM已存在：

class YourTreeComponent extends React.Component {
  state = {
    treeData: [] // 你的树数据
  };

  componentDidMount() {
    this.bindExpandEvents();
  }

  componentDidUpdate() {
    this.bindExpandEvents();
  }

  bindExpandEvents() {
    const buttons = document.getElementsByClassName('rst__expandButton');
    // 遍历按钮，先移除旧事件避免重复绑定，再添加新事件
    Array.from(buttons).forEach(btn => {
      btn.removeEventListener('click', this.handleExpand);
      btn.addEventListener('click', this.handleExpand);
    });
  }

  handleExpand = (e) => {
    // 自定义逻辑
    console.log('展开按钮被点击');
    // 如需阻止默认行为，可使用e.preventDefault()，但可能影响组件原有功能
  };

  render() {
    return (
      <SortableTree
        treeData={this.state.treeData}
        onChange={treeData => this.setState({ treeData })}
      />
    );
  }
}

注意：优先使用第一种方案，因为原生DOM操作会破坏React的虚拟DOM一致性，容易引发不可预见的问题。

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