How does React loop out the entire category?

now there is a category information that needs to be looped out.
needs to traverse the entire catalog tree starting from the root catalog. That is, first pass 0 to get all the first-level categories ID, then get all the second-level categories by traversing the first-level category ID, and finally get the third-level categories by traversing the second-level category ID. I wrote the following. When I get the first-level directory, I don"t know how to write it. I don"t know if it is written correctly

//
querycategory=()=>{

  window.bridge.call("open.api.request", {
      version: "1",
      namespace: "com.alibaba.product",
      name: "alibaba.category.get",
      data: {

        categoryID:this.state.categoryID, //  categoryID=0
        webSite:"1688"
      }
  }, (res) => {

  {/* */}
  const categoryList=res.result.data.categoryInfo[0].childCategorys;
    this.setState({
categoryData:categoryList
} )

  });


}


//
categorylist=()=>{
  const list=this.state.categoryData;
  const lists=list.length
  ?
  list.map((newlist,index)=>(
    //
    <TreeNode label={newlist.name} key={newlist.id}>
           {/* iDquerycategory */}
            <TreeNode label="" key="0">
            </TreeNode>

     </TreeNode>

  ))
:""
;
return lists;
}

I just learned React. I don"t know how to do it. Ask for advice!

React.js

Mar.14,2021

import React, {Component} from 'react'; import PropTypes from 'prop-types'; class Tree extends Component { static propsTypes = { dataSource: PropTypes.shape({ name: PropTypes.string, id: PropTypes.string, }), }; get getChildren() { return this.props.dataSource.map(item => { <TreeNode key={`tree-${item.id}`} label={item.name} id={item.id}/>; }); } render() { return ( <div className={'tree'}> {this.getChildren} </div> ); } } class TreeNode extends Component { static propsTypes = { label: PropTypes.string, id: PropTypes.string, }; state = { loadData: false, close: true, }; data = { list: [], }; async loadData() { this.data.list = []; } async open() { let {loadData, close} = this.state; if (!loadData) { await this.loadData(); loadData = true; } this.setState({ loadData, close: !close, }); } get getChildren() { return this.data.list.map(item => { <TreeNode key={`tree-${item.id}`} label={item.name} id={item.id}/>; }); } render() { const {label} = this.props; const {list} = this.data; return ( <div onClick={this.open.bind(this)} className={'tree-node'}> {label} {list.length > 0 ? this.getChildren : ''} </div> ); } }