React TS适配react-treebeard后节点点击报错及样式问题求助

问题根源 #

你遇到的TypeError: Cannot read property 'cursor' of null错误，核心原因是构造函数中错误地使用setState初始化state。在React类组件的构造函数中，组件还未完成挂载，此时调用setState无法正确初始化组件状态，导致this.state可能处于未定义或不完整的状态，当onToggle方法尝试解构this.state.cursor时就会抛出错误。

另外，你在render方法里硬编码了stateData，并没有使用你导入的data和初始化的this.state.data，这可能和你最初的需求不符，我也会一并修正。

修复步骤 #

1. 修正构造函数的state初始化方式
   把构造函数里的两次setState替换为直接给this.state赋值，这是React类组件初始化state的标准写法：

   constructor(props: any) {
     super(props);
     // 直接初始化state，而非调用setState
     this.state = {
       cursor: null,
       data: data
     };
     this.onToggle = this.onToggle.bind(this);
   }
   

2. 优化onToggle方法的空值检查
   虽然修复构造函数后this.state不会再为null，但为了代码的健壮性，建议保留空值检查，避免后续可能出现的异常：

   private onToggle(node: any, toggled: any) {
     const { cursor } = this.state;
     // 确保cursor存在时再修改其active属性
     if (cursor) {
       cursor.active = false;
     }
     node.active = true;
     if (node.children) {
       node.toggled = toggled;
     }
     this.setState({ cursor: node });
   }
   

3. 使用初始化的state数据渲染树组件
   把render里的硬编码stateData替换为this.state.data，这样才能使用你导入的树形数据：

   public render() {
     return (
       <div className="Center-content">
         <div className="Tree-control">
           <Treebeard data={this.state.data} onToggle={this.onToggle}/>
         </div>
       </div>
     );
   }
   

关于样式显示异常的小提示 #

针对树形节点缩进和显示异常的问题，你可以尝试直接导入react-treebeard包自带的样式文件：

import 'react-treebeard/lib/react-treebeard.css';

这个样式文件包含了组件所需的默认布局样式，导入后应该能解决显示问题。

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