Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间：2023-11-28 01:38:53 29 4
mua khóa gpt4 Nike

我安装了包 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;

Và

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

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

我的组件

import * as React from 'react';
nhập './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,
    };

    trở lại (
      

        

            
                        onToggle={this.onToggle}/>
        
        
      

    );
  }

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;

câu trả lời hay nhất

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

关于javascript - 适配 React TS 后运行 treeview 时出现 TS 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50533337/

29 4 0
Đề xuất bài viết: c++ - Makefile 在没有依赖项的情况下编译好的文件
Đề xuất bài viết: JavaScript 登录
Đề xuất bài viết: c++ - 在 Windows 上链接外部库 CMakeLists.txt
Đề xuất bài viết: javascript - 是否可以在不使用浏览器插件的情况下在点击链接后修改链接目标的 html？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress