javascript - 适配 React TS 后运行 treeview 时出现 TS 错误

Question

我安装了包 react-treebeard

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

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

1) 当我点击一个节点时，它崩溃了

TypeError: Cannot read property 'cursor' of null Content../src/Content.tsx.Content.onToggle C:/src/investment/src/signoff/src/Content.tsx:94 91 | // } 92 | 93 | private onToggle(node: any, toggled: any) {

94 | const {cursor} = this.state; 95 | if (cursor) { cursor.active = false; } 96 | 97 | node.active = true;

和

2) 树节点的制表符和缩进是错误的 - 我假设我没有在某处包含一些样式组件但是看不到我认为它全部在 npm install 下载的节点模块包中的内容 react 树须

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

Answer 1

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