适配 React TS 后运行 treeview 的 TS 报错答案

【问题标题】：TS error running treeview after adapting for React TS适配 React TS 后运行 treeview 的 TS 报错
【发布时间】：2018-05-26 00:30:28
【问题描述】：

我安装了 react-treebeard 包

https://react.rocks/example/react-treebeard

为了让我的 React TS 网站有一个很好的开箱即用的树控件，它允许搜索等。在线演示一切正常，但是它在 ReactJS 中，所以我必须进行一些修改才能翻译它到 TS 语法。但是有两个问题

1) 当我点击一个节点时，它会崩溃并显示

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

94 |常量 {cursor} = this.state; 95 |如果（光标）{ cursor.active = false; 96 | 97 | node.active = true;

和

2) 树节点的制表符和缩进是错误的 - 我假设我没有在某处包含一些样式组件，但看不到什么，因为我认为它们都在 npm install 下载的节点模块包中反应树胡子

第二个问题不那么重要，因为我可以解决这个问题，我只是提到它以防出现明显的问题。然而，第一个似乎是一个基本问题，因为我没有正确地将其转换为 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;

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

你 setState 将cursor: null, 的值更改为真或假，空值总是会导致意外崩溃。你应该避免在你的组件上放置空值我认为你试图拥有这个this.state = { cursor: null } 据我所知，你没有状态

【讨论】：