因为国内用的人太少了，并且作者的例子也写的有点模糊，issue也不回了。所以现在找有来论坛着用过的，或者能快速了解这个组件的人。如果能帮忙解决的话，我愿意提供500-1000的答谢。
在用react-sortable-tree这个组件遇到了问题，如果能帮忙的话，有偿！
我简单的说下遇到的问题和我的需求，可以添加子元素和删除子元素，这个我已经做了。现在我把该组件变成一个可以输入的input，输入完成后可以保存在state里面。它有个自带的属性nodeContentRenderer是可以最大权限的定义组件，但是我不清楚怎么去用。
class Aom extends Component{
constructor(props){
super(props);
this.state = {
treeData:[{title:(
<input type="text" placeholder="请输入选项的文字" ref='inputValue'/>
)}],
showTree:true,
value:'',
childerValue:''
}
}
render(){
return (
<div className={this.state.showTree ? "showContainPart" : "hideContainPart" }>
<div onClick={()=>this.setState({showTree:false})} className='delete-btn'>删除</div>
<SortableTree
className="test"
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
scaffoldBlockPxWidth={300}
generateNodeProps={rowInfo => ({
buttons: [
<button onClick={(event) => this.addNode(rowInfo)}>addchirld</button>,
<button onClick={(event) => this.addSameNode(rowInfo)}>add</button>,
<button onClick={(event) => this.saveNode(rowInfo)}>save</button>
],
})}
/>
</div>
)
}
/*removeNode(rowInfo) {
let {node, treeIndex, path} = rowInfo;
const deleteNode = removeNodeAtPath({
treeData: this.state.treeData,
path: path, // You can use path from here
getNodeKey: ({node: TreeNode, treeIndex: number}) => {
return number;
},
ignoreCollapsed: false,
});
this.setState({
treeData:deleteNode
})
console.log(this.state.treeData[0])
}*/
saveNode(rowInfo){
const input = ReactDOM.findDOMNode(this.refs.inputValue);
const value = input.value;
let NEW_NODE = {title:value};
let { path } = rowInfo;
console.log(rowInfo);
let newTree = changeNodeAtPath({
treeData: this.state.treeData,
path:path,
newNode: NEW_NODE,
getNodeKey: ({ treeIndex }) => treeIndex
});
this.setState({treeData: newTree});
}
addSameNode(rowInfo){
{
let NEW_NODE = {title:(
<fuck />
)};
let {node, treeIndex, path} = rowInfo;
path.pop();
let parentNode = getNodeAtPath({
treeData: this.state.treeData,
path : path,
getNodeKey: ({ treeIndex }) => treeIndex,
ignoreCollapsed : true
});
let getNodeKey = ({ node: object, treeIndex: number }) => {
return number;
};
let parentKey = getNodeKey(parentNode);
if(parentKey === -1) {
parentKey = null;
}
console.log(parentKey);
let newTree = addNodeUnderParent({
treeData: this.state.treeData,
newNode: NEW_NODE,
expandParent: true,
parentKey: parentKey,
getNodeKey: ({ treeIndex }) => treeIndex
});
this.setState({treeData: newTree.treeData});
}
}
addNode(rowInfo) {
let NEW_NODE = {
title: (
<fuck />
)
};
let { path} = rowInfo;
let newTree = addNodeUnderParent({
treeData: this.state.treeData,
newNode: NEW_NODE,
expandParent: true,
parentKey: path.pop(),
getNodeKey: ({treeIndex}) => treeIndex
});
this.setState({treeData: newTree.treeData});
}
}
因为不会用那个属性，所以我是把input当作title插入treeData里面，然后通过自带的change方法改变node,但是这样显然有问题，因为后面加入的子元素如果带有ref属性就会报错。
hyy1115
#6
这个插件源码很少，你完全可以去看一下，比如nodeContentRenderer传入的是一个function
nodeContentRenderer: PropTypes.func
然后把nodeContentRenderer传入了dndWrapSource的el参数
export function dndWrapSource(el, type) {
return dragSource(type, nodeDragSource, nodeDragSourcePropInjection)(el);
}
然后去下面这个文件分析一下
react-sortable-tree/src/utils/drag-and-drop-utils.js