注:支持反应-DND:16,反应:17/18/19

注意: 不支持 React 严格模式

反应可排序树

用于分级数据的可拖放排序的响应组件。 检查 故事书 展示一些基本和先进的特征.

目录

• 开始
• 使用量
• 道具
• 数据助手
• 主题
• 浏览器兼容性
• 解决问题
• 捐款

开始

安装 react-sortable-tree 使用 npm.

# NPM
npm install @exytab/react-sortable-tree --save

# YARN
yarn add @exytab/react-sortable-tree

ES6和CommonJS的建筑随每次分发而提供. 例如:

// This only needs to be done once; probably during your application's bootstrapping process.
import '@exytab/react-sortable-tree/dist/style.css';

// You can import the default tree with dnd context
import SortableTree from '@exytab/react-sortable-tree';

// Or you can import the tree without the dnd context as a named export. eg
import { SortableTreeWithoutDndContext as SortableTree } from '@exytab/react-sortable-tree';

// Importing from cjs (default)
import SortableTree from '@exytab/react-sortable-tree/dist/index.cjs.js';
import SortableTree from '@exytab/react-sortable-tree';

// Importing from esm
import SortableTree from '@exytab/react-sortable-tree/dist/index.esm.js';

使用量

import React, { Component } from 'react';
import SortableTree from '@exytab/react-sortable-tree';
import '@exytab/react-sortable-tree/dist/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>
    );
  }
}

道具

数据辅助函数

需要手把你的平面数据变成嵌入的树数据吗? 想要在树数据上执行添加/移动操作而不创建自己的递归函数吗 ? 检查导出到的助手函数 tree-data-utils.ts。 。 。 .

• getTreeFromFlatData: 将平面数据(如数据库中的数据)转换为嵌入树数据.
• getFlatDataFromTree: 将树数据转换回平面数据.
• addNodeUnderParent:在给定路径的父节点下添加一个节点.
• removeNode: 对于给定的路径, 获取该路径的节点, treeIndex, 以及带有该节点的树数据 .
• removeNodeAtPath:对于给定的路径,去掉节点并返回树数据.
• changeNodeAtPath: 修改给定路径上的节点对象.
• map:在树上的每一个节点上执行一个变化.
• walk:按顺序访问树上每个节点.
• getDescendantCount:计算这个节点有多少后代.
• getVisibleNodeCount:计算这个节点有多少能见度的后人.
• getVisibleNodeInfoAtIndex:在树上数据中获取可见节点.
• toggleExpandedForAll: 扩展或关闭树上每个节点.
• getNodeAtPath:在输入路径取出节点.
• insertNode: 在指定的深度和最小TreeIndex上插入输入节点.
• find: 在树上查找匹配搜索查询的节点.
• isDescendant:检查一个节点是否是另一个节点的后人.
• getDepth:得到树上最长的路径.

主题

使用 theme prop与导入的主题模块一起,您可以轻松地将默认外观与另一个标准外观相覆盖.

专题

文件浏览器	全节点拖曳	受物质UI启发的最小化主题
@nosferatu500/主题文件-探索者	反应 - 调味树 - 主题 - 完全节点 - 道格	反应 - 各类树木 - 主题 - 最小
吉图布 | 国家预防机制	吉图布 | 国家预防机制	吉图布 | 国家预防机制

需要帮助 - 由于主题功能刚刚启用,因此很少(只有 两个 )主题模块。 如果你已经定制了你的树的外观 以特别酷或容易使用, 我很乐意在读本中显示它 与Github repo和国家预防机制的页面链接 如果你把它转换成一个主题。 你可以用我的车 文件探索器主题repo 作为插入自己东西的模板.

浏览器兼容性

解决问题

如果在生产中抛出“ TypeError: fn 不是函数” 错误

这个问题可能与UglifyJS和Webpack行为的持续不相容有关. 参见 创建- react-app # 2376。 。 。 .

减轻这一问题的最简单方法是增加: comparisons: false 到您在此看到的丑化配置 : https://github.com/facebookincubator/create-react-app/pull/2379/files 互联网档案馆的存檔,存档日期2013-12-29

如果与其他使用反应-dnd的组件不起作用

反应-dnd只允许一次一个 DragDropContext(见: https://github.com/gaearon/react-dnd/issues/186 (中文(简体) )) (中文(简体) ). 要绕过这里, 您可以通过 SortableTreeWithoutDndContext。 。 。 .

// before
import SortableTree from '@exytab/react-sortable-tree';

// after
import { SortableTreeWithoutDndContext as SortableTree } from '@exytab/react-sortable-tree';

捐款

请读一下 行为守则我积极欢迎拉动请求:)

复制寄存器并运行后 yarn install 在内部,可以使用以下命令来开发和构建工程.

# Starts a webpack dev server that hosts a demo page with the component.
# It uses react-hot-loader so changes are reflected on save.
yarn start

# Start the storybook, which has several different examples to play with.
# Also hot-reloaded.
yarn run storybook

# Runs the library tests
yarn test

# Lints the code with eslint
yarn run lint

# Lints and builds the code, placing the result in the dist directory.
# This build is necessary to reflect changes if you're
#  `npm link`-ed to this repository from another local project.
yarn run build

拉请求是欢迎的!

许可证

麻省理工学院