Question

我安装了包react-treebeard

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

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

1）当我点击某个节点时，它会以

崩溃

TypeError：无法读取null的属性'cursor'   内容../ 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下载的节点模块包中的全部内容反应-树胡

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

你将setState的值cursor: null,更改为true或false，null值总是会导致意外崩溃。你应该避免在你的组件上放置空值我也认为你试图让这个值this.state = { cursor: null } 到目前为止，我可以看到你没有州

在适应React TS

1 个答案: