react-sortable-tree 引用报错

react-sortable-tree 引用报错

问题相关代码，请勿粘贴截图

import SortableTree from "react-sortable-tree";
import "react-sortable-tree/style.css";
import PropTypes from 'prop-types';
console.log(typeof SortableTree)
export default class SortableTrees extends React.Component {

    
    // 设置默认值
    static defaultProps = {
      isDrop: true,
      haveChildren: true,
      treeData: [{
        title: 'Workflow test',
        expanded: true,
        children: [{
          title: 'taskflow test',
        }, {
          title: 'taskflow test1',
          expanded: true,
          children: [{
            title: 'taskflow2-1',
          }, {
            title: 'taskflow2-2',
          }],
        }],
      }],
      onChangeVal: () => {},
    };
    
    //调用组件时，值发生改变接收新的数据
    onChangeValue = (treeData) => {
      this.props.onChangeVal(JSON.stringify(treeData));
    }
    
    //是否可以拖动（默认可以不添加, 根据需求而定）
    stopParentNode = (node) => {
      if (!node.nextParent) {
        return false;
      }
      return true;
    }
    
    //是否有子级（默认可以不添加, 根据需求而定）
    toHaveChildren = (node) => {
      if (node.type === 'streaming') {
        return false;
      }
      return true;
    }
    
    // render
    render() {
      const {
        isDrop,
        treeData,
        haveChildren,
      } = this.props;
  console.log(isDrop,
    treeData,
    haveChildren,SortableTree)
  return   (
           <div>
            <SortableTree></SortableTree>
           </div>
        )
    }
  }
      // 定义propTypes传输类型：
      SortableTrees.propTypes = {
        isDrop: PropTypes.bool, // 是否可以拖动
        treeData: PropTypes.array, // 树结构数据
        onChangeVal: PropTypes.func, // 值改变触发事件
        haveChildren: PropTypes.bool, // 是否有子级
      };

我的解答思路和尝试过的方法

我想要达到的结果

哦，你把报错信息复制出来发给我看一下

似乎没什么问题 ，你试试这个例子

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app

export default class Tree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] },
      ],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

https://github.com/frontend-collective/react-sortable-tree

你现在打印 SortableTree 结果是什么？