bugfix> javascript > 投稿

パッケージreact-treebeardをインストールしました

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

検索などを許可するReact TS Webサイトのすぐに使えるツリーコントロールを使用できるようにするために、オンラインデモはすべて正常に動作しますが、ReactJSにあるため、TSに翻訳するためにいくつかの修正が必要です構文。ただし、2つの問題があります

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-treebeardによってダウンロードされたノードモジュールパッケージにすべてあると思ったように見えません

2つ目は、それを解決できるので、それほど問題ではありません。何かが飛び出した場合に備えて言及しました。しかし、最初の問題は、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;