ReactJS中的递归树视图

我正在尝试用ReactJS实现JSON数据的树视图，我已经完成了大部分工作，但是我在扩展和折叠按钮上遇到了问题。现在，当单击其中一个子树节点成功展开整个树时，问题是根据组件的状态（折叠/展开），我想更改图标。有人能帮我吗

import React from 'react';
import {IconExpand, IconCollapse} from '../components/Icons';

export default class Tree extends React.Component{
    constructor(props){
        super(props);
        const me = this;
        me.state = {
            visible: true
        };
        me.listItem = null;
        me.isVisible = me.isVisible.bind(me);
    }

    render(){
        const me = this;
        const {visible} = me.state;
        const {jsonData} = me.props;

        let keys = [];
        for (const key in jsonData) {
            if (jsonData.hasOwnProperty(key)) {
                keys.push(key);
            }
        }

        return (
            <ul className="x-tree">
                {keys.map((key, index) => {
                    if(jsonData[key] && typeof jsonData[key] === 'object'){
                        return (
                            <li 
                                className="x-tree-item x-tree-item-node"
                                key={`complex-${key}-${index}`}
                                ref={el => { me.listItem = el; }}
                            >
                                {visible
                                    ? <IconCollapse
                                        className="x-tree-icon"
                                    />
                                    : <IconExpand
                                        className="x-tree-icon"
                                    />
                                }
                                <span
                                    className="x-tree-key"
                                    onClick={me.onClick.bind(me)}
                                >
                                    {key}
                                </span>
                                <Tree
                                    jsonData={jsonData[key]}
                                    expanded={true}
                                />
                            </li>
                        )
                    } else {
                        return (
                            <li 
                                className="x-tree-item"
                                key={`simple-${key}-${index}`}
                            >
                                <span className="x-tree-key">{key}:     </span>
                                <span className="x-tree-value">    {jsonData[key]}</span>
                            </li>
                        )
                    }
                })}
            </ul>
        );
    }

    onClick(event){
        const me = this;
        let node = event.currentTarget;
        let tree = node.nextSibling;
        tree.style.display = tree.style.display === 'none' ? 'block' :     'none';
        me.setState({
            visible: !me.state.visible
        });
        me.isVisible(tree.style.display !== 'none');
    }

    isVisible(key){ 
        return key;
    }
}

从“React”导入React；
从“../components/Icons”导入{IconExpand，IconCollapse}；
导出默认类树扩展React.Component{
建造师（道具）{
超级（道具）；
const me=这个；
me.state={
可见：正确
};
me.listItem=null；
me.isVisible=me.isVisible.bind（我）；
}
render（）{
const me=这个；
const{visible}=me.state；
const{jsonData}=me.props；
让键=[]；
for（jsonData中的常量键）{
if（jsonData.hasOwnProperty（键））{
按键。按（键）；
}
}
返回(

{keys.map（（键，索引）=>{
if（jsonData[key]&&typeof jsonData[key]=“object”）{
返回(
{me.listItem=el；}}
>
{可见
? 
: 
}
{key}

)
}否则{
返回(

{key}：
{jsonData[key]}

)
}
})}

);
}
onClick（事件）{
const me=这个；
让节点=event.currentTarget；
让tree=node.nextSibling；
tree.style.display=tree.style.display=='none'？'block'：'none'；
我是塞斯塔({
可见：！me.state.visible
});
me.isVisible（tree.style.display！=“无”）；
}
isVisible（键）{
返回键；
}
}

您应该为每个节点添加一个状态，因为它现在是整个树的可见状态

树组件的所有节点都具有相同的表达式

{visible ? <IconCollapse className="x-tree-icon" /> : <IconExpand  className="x-tree-icon" /> }

{visible？：}

在该表达式中，visible对于每个

节点都具有相同的值，因此您的组件对于特定树级别中的所有节点都具有一个状态

visible

。

类似以下内容：

class Tree extends React.Component{
  constructor(props){
      super(props);
      const me = this;
      me.state = {selected: (new Map(): Map<string, boolean>)};
      me.listItem = null;
  }

  render(){
      const me = this;
      const {visible} = me.state;
      const {jsonData} = me.props;

      let keys = [];
      for (const key in jsonData) {
          if (jsonData.hasOwnProperty(key)) {
              keys.push(key);
          }
      }

      return (
          <ul className="x-tree">
              {keys.map((key, index) => {
                  if(jsonData[key] && typeof jsonData[key] === 'object'){
                      return (
                         <li 
                          className="x-tree-item x-tree-item-node"
                          key={`complex-${key}-${index}`}
                          ref={el => { me.listItem = el; }}
                         > 

                          <span
                              className="x-tree-key"
                              onClick={me.onClick.bind(me)}
                              id={key}
                          >
                                {!!me.state.selected.get(key)
                                ? <IconCollapse  
                                    className="x-tree-icon"
                                />
                                : <IconExpand
                                    className="x-tree-icon"
                                />
                            }
                              {key}
                          </span>
                          <Tree
                              jsonData={jsonData[key]}
                              expanded={true}
                          />
                      </li>
                      )
                  } else {
                      return (
                          <li 
                              className="x-tree-item"
                              key={`simple-${key}-${index}`}
                          >
                              <span className="x-tree-key">{key}:     </span>
                              <span className="x-tree-value">    {jsonData[key]}</span>
                          </li>
                      )
                  }
              })}
          </ul>
      );
  }

  onClick(event){
      const me = this;
      let node = event.currentTarget;
      let tree = node.nextSibling;
      console.log(node.id);
      tree.style.display = tree.style.display === 'none' ? 'block' :     'none';
      this.setState((state) => {
        const selected = new Map(state.selected);
        selected.set(node.id, !selected.get(node.id)); // toggle
        return {selected};
      });

  }

}

类树扩展了React.Component{
建造师（道具）{
超级（道具）；
const me=这个；
me.state={selected:（newmap（）：Map）}；
me.listItem=null；
}
render（）{
const me=这个；
const{visible}=me.state；
const{jsonData}=me.props；
让键=[]；
for（jsonData中的常量键）{
if（jsonData.hasOwnProperty（键））{
按键。按（键）；
}
}
返回(

{keys.map（（键，索引）=>{
if（jsonData[key]&&typeof jsonData[key]=“object”）{
返回(
{me.listItem=el；}}
> 
{！！me.state.selected.get（键）
? 
: 
}
{key}

)
}否则{
返回(

{key}：
{jsonData[key]}

)
}
})}

);
}
onClick（事件）{
const me=这个；
让节点=event.currentTarget；
让tree=node.nextSibling；
console.log（node.id）；
tree.style.display=tree.style.display=='none'？'block'：'none'；
this.setState（（状态）=>{
const selected=新映射（state.selected）；
selected.set（node.id，！selected.get（node.id））；//切换
返回{selected}；
});
}
}