关于React结合sortable.js有些疑问

[begoat]

最近看了你的简书的文章想自己实现自己的网页编辑器， 根据 sortable 这个代码 ： https://github.com/fis-components/sortablejs/blob/master/README.md

---

import * as React from "react";
import Sortable from 'sortablejs';

export class SortableExampleEsnext extends React.Component {

  sortableContainersDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        handle: ".group-title" // Restricts sort start click/touch to the specified element
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  sortableGroupDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        draggable: "div" // Specifies which items inside the element should be sortable
        group: "shared"
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  render() {
    return (
      <div className="container" ref={this.sortableContainersDecorator}>
        <div className="group">
          <h2 className="group-title">Group 1</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
        <div className="group">
          <h2 className="group-title">Group 2</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
      </div>
    );
  }
}

---

跑了这个段 Sortable结合 react 的 demo 发现可以 直接拖拽了 ，并没有出现 你简书文中提到的 用什么 sortable操作回滚技术，把sortable当作中间动画。

我 console.log 发现 用类似上面的 代码去跑并没有 重新render 请问这是怎么 回事呢？

[ascoders]

我 console.log 发现 用类似上面的 代码去跑并没有 重新render 请问这是怎么 回事呢？

这是正确还是非正确的情况？

另外在react之外擅自修改dom，在更新父节点操作时内核会出错，可能是你没有触发此类操作吧。

[begoat]

• 谢谢你的回复，我想实现 图形编辑器，看了简书的思路首先想实现视图区的拖拽，我用<li>value</li>的父子列 想去 模拟 所要的 随意拖拽+跨父级拖拽，这是我的测试代码。

---

import React from "react";
import ReactDOM from 'react-dom';
import Sortable from 'sortablejs';

class SortableExampleEsnext extends React.Component {

  sortableContainersDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        handle: ".group-title" // Restricts sort start click/touch to the specified element
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  sortableGroupDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        draggable: "li",
        group: {
            name: "shared",
            pull: true,
            put: true
        },
        animation: 150,
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  sortableDivDecorator= (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        draggable: ".draggable",
        group: {
            name: "shared2",
            pull: true,
            put: true
        },
        animation: 150,
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  render() {
    console.log("Test1")
    return (
      <div className="container" ref={this.sortableContainersDecorator}>
        <div className="group">
          <h2 className="group-title">Group 1</h2>
            <ul ref={this.sortableDivDecorator}>
                <div className="draggable" >
                <li>Sports</li>
                    <ul ref={this.sortableGroupDecorator}>
                        <li >Walking</li>
                        <li >Basketball</li>
                        <li >Gym</li>
                    </ul>
                </div>
                <div className="draggable" >
                <li>Computer</li>
                    <ul ref={this.sortableGroupDecorator}>
                        <li >Programming</li>
                        <li >Surfing</li>
                        <li >Devops</li>
                    </ul>
                </div>
                <div className="draggable" >
                <li>Food</li>
                    <ul ref={this.sortableGroupDecorator}>
                        <li >Meat</li>
                        <li >Vegetables</li>
                        <li >Milk</li>
                    </ul>
                </div>
            </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<SortableExampleEsnext />,document.getElementById('root'));

可以实现了跨父级拖拽，随意拖拽 的功能，除了父级元素被拖空之后就再也拖不进去了（不知道是不是脱离了react 控制什么的）这个情况unexpected之外，其他感觉没什么异常，我刚接触react 不久，不是很懂这算不算 擅自修改dom，我也不清楚 为啥 这样拖拽为什么不会重新render(看sortable 里面提到用ref 作为react 直接操作DOM 的 安全入口，不知道是不是这个原因)，想请教一下您的看法。

• 我换了一个思路 去 学，不是跟简书上的尝试着写了，所有东西都是组建的形式结合上去的，就想一个一个分开来看看源码 学习，记得只有viewport/action.ts 用到了 Sortable, 想看到那里的时候在解决那个问题，想问下 关于 不是接触react很久的写以前写python多一点，想快速做出、掌握这个图形编辑器，您有什么建议吗？

[ascoders]

使用 react 时要注意，只能修改非 react 控制范围的 dom，否则会引发各种 bug，尝试去找原因也是一种无意义的行为，因为前提已经错了。

快速掌握技巧就是多看源码，这里也有现成的源码宝库，克隆一下项目拿去学吧。

[begoat]

好的谢谢🙏