Javascript 如何访问父节点和子节点

我正在使用rc tree（tree.js的一个版本）进行响应，我不知道如何创建一个方法，当检查树项时，该方法会更改该元素、父项及其子项的属性

例如：

• 如果我单击New Folder1更改New Folder1项上的选中值， 新文件夹2，新文件夹3，最后是第12层

• 如果我单击第12层更改第12层上的选中值，新文件夹3， 新文件夹2，最后是新文件夹1

• 如果我单击new Folder2更改Folder2上的选中值， 折叠1，折叠3，最后是第12层

下面是一个json模式：

{
    "name": "New Folder1",
    "key": "0-625",
    "isLeaf": false,
    "type": "folder",
    "expanded": false,
    "checked": true,
    "children": [{
            "name": "New Folder2",
            "key": "0-629",
            "isLeaf": false,
            "type": "folder",
            "expanded": false,
            "checked": true,
            "children": [{
                "name": "New Folder3",
                "key": "0-623",
                "isLeaf": false,
                "type": "folder",
                "expanded": false,
                "checked": true,
                "children": [{
                    "name": "layer12",
                    "key": "0-99",
                    "isLeaf": true,
                    "type": "layer",
                    "checked": true
                }]
            }]
        }]
},

我发现了这个方法，当你们检查树上的项目时，在其中查找节点。但是如何更改其子节点和父节点

function getNodeByKey(key, node){
    var reduce = [].reduce;
    function runner(result, node){
        if(result || !node) return result;
        return node.key === key && node || //is this the proper node?
            runner(null, node.children) || //process this nodes children
            reduce.call(Object(node), runner, result);  //maybe this is some ArrayLike Structure
    }
    return runner(null, node);
}

编辑：

在React中，需要使用ref属性来访问node元素，然后可以使用javascript:reactjs访问子元素和父元素

要访问子节点和父节点，我想我必须使用

childNodes

，

parentNode

，

nextSibling

和

以前的同级节点

但是如何使用ref属性？？？因为它是一个节点数组

render() {
    const loop = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length) {
                return <TreeNode ref={this.myRef} title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode ref={this.myRef} title={item.name} key={item.key} isLeaf={item.isLeaf} checked={item.checked}  />
            );
        });
    };
    return (
        <div className="draggable-container">
            <Tree
                // Expand
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand} autoExpandParent={this.state.autoExpandParent}
                // Draggable
                draggable
                onDragStart={this.onDragStart}
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
                // Select && Check
                onSelect={this.onSelect}
                checkable onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} >
                { loop(this.state.treeData) }
            </Tree>
        </div>  
    );
}

onCheck = (checkedKeys, event) => {
   how can get node checked??? it always returns last node
   const node = this.myRef.current;
   console.log(node)
}

render（）{
常量循环=（数据）=>{
返回数据。映射（（项）=>{
if（item.children&&item.children.length）{
返回{loop（item.children）}；
}
返回(
);
});
};
返回(
{loop（this.state.treeData）}
);
}
onCheck=（checkedKeys，事件）=>{
如何检查节点？？？它总是返回最后一个节点
const node=this.myRef.current；
console.log（节点）
}

所以。。。关于“ref”问题：您将它们全部分配给同一个变量，您应该为每个节点生成ref变量：

 this.myRefs = {};

<TreeNode ref={itemRef=>this.myRefs[item.key]=itemRef} title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>

---

这是我的解决方案，因为我的想法是使用所有树信息节点修改treeData：

onCheck = (checkedKeys, event) => {
    // console.log(this.treeData);
    const checkedKey = event.node.props.eventKey;
    this.updateItemChecked(checkedKey);
    this.setState({ checkedKeys: checkedKeys }, () => {
        this.props.parentTree(this.treeData);
    });
}

updateItemChecked = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') !== 0) {
        if (result.checked === true ) {
            result.checked = false;
        } else {
            result.checked = true;     
        }
    } else {
        this.checkIfFolderHasItem(result);
    }

}

checkIfFolderHasItem = (result) => {
    if ( result.children && result.children.length > 0) {
        result.children.forEach( (item) => {
            if (item.type.localeCompare('folder') !== 0) {
                this.updateItemChecked(item.key);
            } else {
                this.checkIfFolderHasItem(item);
            }
        });
    }
}

// Expand
onExpand = (expandedKeys, event) => {
    // console.log('onExpand', expandedKeys);
    const checkedKey = event.node.props.eventKey;
    this.updateFolderExpanded(checkedKey);
    this.setState({ expandedKeys, autoExpandParent: false }, ()=> {
        this.props.parentTree(this.treeData);
    });
}

updateFolderExpanded = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') === 0) {
        if (result.expanded === true ) {
            result.expanded = false;
        } else {
            result.expanded = true;     
        }
    }
}

render() {
    const loop = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length) {
                return <TreeNode title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} checked={item.checked}  />
            );
        });
    };
    return (
        <div className="draggable-container">
            { 
                // (this.state.showModal) ? <TreeModal show={this.state.showModal} info={this.state.selected} treeData={this.state.treeData} parentTreeModal={this.doParentTreeModal} /> : null 
            }
            <Tree
                // Expand
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand} autoExpandParent={this.state.autoExpandParent}
                // Draggable
                draggable
                onDragStart={this.onDragStart}
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
                // Select && Check
                onSelect={this.onSelect}
                checkable onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} >
                { loop(this.state.treeData) }
            </Tree>
        </div>  
    );
}

---

你需要在这里问一个问题。现在还不清楚什么是有效的，什么是无效的，以及你需要什么样的帮助。。。我将在React中编辑问题，您需要使用

ref

属性来访问节点元素，然后您可以使用javascript访问子元素和父元素：为什么总是返回最后一个ref？？

onCheck = (checkedKeys, event) => {
    // console.log(this.treeData);
    const checkedKey = event.node.props.eventKey;
    this.updateItemChecked(checkedKey);
    this.setState({ checkedKeys: checkedKeys }, () => {
        this.props.parentTree(this.treeData);
    });
}

updateItemChecked = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') !== 0) {
        if (result.checked === true ) {
            result.checked = false;
        } else {
            result.checked = true;     
        }
    } else {
        this.checkIfFolderHasItem(result);
    }

}

checkIfFolderHasItem = (result) => {
    if ( result.children && result.children.length > 0) {
        result.children.forEach( (item) => {
            if (item.type.localeCompare('folder') !== 0) {
                this.updateItemChecked(item.key);
            } else {
                this.checkIfFolderHasItem(item);
            }
        });
    }
}

// Expand
onExpand = (expandedKeys, event) => {
    // console.log('onExpand', expandedKeys);
    const checkedKey = event.node.props.eventKey;
    this.updateFolderExpanded(checkedKey);
    this.setState({ expandedKeys, autoExpandParent: false }, ()=> {
        this.props.parentTree(this.treeData);
    });
}

updateFolderExpanded = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') === 0) {
        if (result.expanded === true ) {
            result.expanded = false;
        } else {
            result.expanded = true;     
        }
    }
}

render() {
    const loop = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length) {
                return <TreeNode title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} checked={item.checked}  />
            );
        });
    };
    return (
        <div className="draggable-container">
            { 
                // (this.state.showModal) ? <TreeModal show={this.state.showModal} info={this.state.selected} treeData={this.state.treeData} parentTreeModal={this.doParentTreeModal} /> : null 
            }
            <Tree
                // Expand
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand} autoExpandParent={this.state.autoExpandParent}
                // Draggable
                draggable
                onDragStart={this.onDragStart}
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
                // Select && Check
                onSelect={this.onSelect}
                checkable onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} >
                { loop(this.state.treeData) }
            </Tree>
        </div>  
    );
}

[
    {
        "name": "Capas1",
        "key": "0-23",
        "isLeaf": false,
        "type": "folder",
        "expanded": true,
        "children": [{
                "name": "sectores",
                "key": "0-20",
                "isLeaf": true,
                "type": "layer",
                "checked": true
            },
            {
                "name": "distribucion",
                "key": "0-22",
                "isLeaf": true,
                "type": "layer",
                "checked": false
            }]
    }, 
    {
        "name": "Nueva Carpeta0",
        "key": "0-624",
        "isLeaf": false,
        "type": "folder",
        "expanded": false,
        "checked": false
    },
    {
        "name": "Nueva Carpeta1",
        "key": "0-625",
        "isLeaf": false,
        "type": "folder",
        "expanded": true,
        "children": [{
                "name": "Nueva Carpeta2",
                "key": "0-629",
                "isLeaf": false,
                "type": "folder",
                "expanded": true,
                "children": [{
                    "name": "Nueva Carpeta3",
                    "key": "0-623",
                    "isLeaf": false,
                    "type": "folder",
                    "expanded": true,
                    "children": [{
                        "name": "distribucion33",
                        "key": "0-99",
                        "isLeaf": true,
                        "type": "layer",
                        "checked": true
                    }]
                }]
            }]
    },
    {
        "name": "sectores1",
        "key": "0-27",
        "isLeaf": true,
        "type": "layer",
        "checked": true
    },
    {
        "name": "sectores12",
        "key": "0-89",
        "isLeaf": true,
        "type": "layer",
        "checked": false
    },
    {
        "name": "Capas 2",
        "key": "0-588",
        "isLeaf": false,
        "type": "folder",
        "expanded": false,
        "children": [{
            "name": "Capas 3",
            "key": "0-589",
            "isLeaf": false,
            "type": "folder",
            "expanded": false,
            "children": [{
                "name": "Prueba",
                "key": "0-36",
                "isLeaf": true,
                "type": "layer",
                "checked": false
                }]
            }]
    }
]