Javascript TS在适应React TS后运行treeview时出错

我安装了软件包react treebeard

允许我有一个很好的开箱即用的树控件，用于我的React-TS网站，允许搜索等。在线演示一切正常，但它是在React-JS中，因此我必须进行一些修改，以将其转换为TS语法。然而，有两个问题

1） 当我点击一个节点时，它会崩溃

TypeError:无法读取null的属性“cursor” Content../src/Content.tsx.Content.onToggle C:/src/investment/src/signoff/src/Content.tsx:94 91 |/}92 | 93 |私有onToggle（节点：任意，切换：任意）{

94 | const{cursor}=this.state；95 | if（cursor）{cursor.active=false；}96 | 97 | node.active=true

及

2） 树节点的制表符和缩进是错误的-我假设我没有在某个地方包含一些样式组件，但是我看不到npm install react treebeard下载的节点模块包中的所有内容

第二个问题不太重要，因为我可以解决这个问题，我只是提到了它，以防出现一些突出的问题。然而，第一个问题似乎是一个基本问题，我没有正确地将其转换为TS语法，因此希望有人能发现这个问题

我的组件

import * as React from 'react';
import './App.css';

import {Treebeard} from 'react-treebeard';

import data from './components/treebeard/data';

interface IContentState {
  data : any,
  cursor : any
}
class Content extends React.Component<{},IContentState> {


  constructor(props: any) {
    super(props);

    this.setState({cursor: null});
    this.setState({data: data});
    this.onToggle = this.onToggle.bind(this);       
  }

  public render() {
    const stateData = {
        children: [
            {
                children: [
                    { name: 'child1' },
                    { name: 'child2' }
                ],
                name: 'parent',
            },
            {
                children: [],
                loading: true,
                name: 'loading parent',
            },
            {
                children: [
                    {
                        children: [
                            { name: 'nested child 1' },
                            { name: 'nested child 2' }
                        ],
                        name: 'nested parent',
                    }
                ],
                name: 'parent',
            }
        ],
        name: 'root',
        toggled: true,
    };

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

private onToggle(node: any, toggled: any) {
    const {cursor} = this.state;
    if (cursor) { cursor.active = false; }

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

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

export default Content;

import*as React from'React'；
导入“/App.css”；
从'react Treebeard'导入{Treebeard}；
从“./components/treebeard/data”导入数据；
接口IContentState{
数据：任何，
光标：任何
}
类内容扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
this.setState（{cursor:null}）；
this.setState（{data:data}）；
this.ontogle=this.ontogle.bind（this）；
}
公共渲染（）{
常量stateData={
儿童：[
{
儿童：[
{name:'child1'}，
{name:'child2'}
],
名称：'父'，
},
{
儿童：[]，
加载：对，
名称：“正在加载父项”，
},
{
儿童：[
{
儿童：[
{name:'嵌套子1'}，
{name:'嵌套子2'}
],
名称：“嵌套父项”，
}
],
名称：'父'，
}
],
名称：'根'，
切换：对，
};
返回(
);
}
私有onToggle（节点：任意，切换：任意）{
const{cursor}=this.state；
如果（游标）{cursor.active=false；}
node.active=true；
如果（node.children）{node.toggled=toggled；}
this.setState（{cursor:node}）；
}
}
导出默认内容；

您设置了

游标：null的值，

将其更改为true或false，null值总是会导致意外的崩溃。您应该避免在组件上放置null值。我认为您也在尝试使用此

this.state={cursor null}

据我所知，你没有州