React,antDesign 树形菜单

Question

如下这种结构,React,antDesign 实现的,如何写成树形菜单　?

render(){
    const newNode = this.state.newNode;
        return(
          <ItemPanel>

          <Item>1</Item>
          <Item>2</Item>
          <Item>3</Item>

          </ItemPanel>
          )
  }

Answer 1

1.在不知道树的深度的情况下，建议使用递归遍历，我在后面写了一个最简单的例子，用了 antd 的组件。
2.如果层级不多，简单的利用react的组合，一层层渲染出来就行。
以下是我为你的一个通过遍历实现的一个例子：

const NAV = {
  yn: {
    name: "益农社",
    id: "1",
    subNavs: {
      rankingCity: {
        name: "市州排行",
        id: "11"
      },
      exercise: {
        name: "规定动作",
        id: "12"
      }
    }
  },
  dealAnalyze: {
    name: "交易分析",
    id: "2",
    subNavs: {
      survey: {
        name: "交易概况",
        id: "21"
      },
      recharging: {
        name: "手机充值",
        id: "22"
      }
    }
  }
};

function renderSider(nav) {
  // _.values()为lodash的方法
  const values = _.values(nav);
  return values.map(item => {
    if (item.subNavs) {
      return (
        <SubMenu
          key={item.id}
          title={
            <span>
              <span className="title-label">{item.name}</span>
            </span>
          }
        >
          {renderSider(item.subNavs)}
        </SubMenu>
      );
    } else {
      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
    }
  });
}

Answer 2

可以写一个递归