关于React结合sortable.js有些疑问 about gaea-editor

[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]

好的谢谢🙏