반응을 사용하여 중첩 된 목록

Question

다른 입력 데이터를 사용하여 중첩 된 목록을 별도의 div's에 만들려고합니다. 중첩 목록 인쇄 문제가 있습니다 : List 2 여기에 있습니다. 나는 name 객체의 속성을 인쇄 한 다음 childNodes이 있는지 확인합니다. name 속성도 중첩되어 있습니다. 여기에 Parent 클래스가 있습니다.

export default class Parent extends Component { 
    render() { 
    return (

    <div> 
     <h4>List 1</h4> 
     <ul> 
     {this.props.jsonData1.map(item => { 
      return <Child name={item.name}/> 
     })} 
     </ul> 
    </div> 

    <div> 
     <h4>List 2</h4> 
     <ul> 
     {this.props.jsonData2.map(item1 => { 
      return <Child name={item1.name}/> 
     if(item1.childNodes){ 
      <ul> 
      {item1.jsonData2.map(item2=>{ 
      return <Child name={item2.name}/> 
      })} 
     }</ul> 
     })} 
     </ul> 
    </div> 
    ); 
    } 
} 

내 Child 클래스는 매우 간단합니다. 단일 목록 요소 만 반환합니다.

export default class Child extends Component { 
    render() { 
    let {name}=this.props; 
    return (
     <li>{name}</li> 
    ); 
    } 
} 

여기에서 내가 잘못하고있는 것에 대한 지침을 알려 주시면 감사하겠습니다. 재귀를 가능한 한 간단하게 유지하려고하지만 분명히 잘못하고 있습니다.

Answer 1

코드를보고있는 것들이 몇 가지 있습니다.

export default class Parent extends Component { 
    render() { 
     return(
     <div> 
      //other code 
     </div> 
    ); 
    } 
} 

Answer 2

당신은 거의 다,하지만 어쩌면이 바른 길에 여러분을 안내 할 것입니다 : 당신의 부모 클래스의 대가로, 당신은 하나의 DIV에 모든 것을 캡슐화했는지 확인합니다. 재귀 적으로 무언가를하고 싶을 때마다 함수를 다시 호출하지 않기 위해 우리의 기본 경우가 무엇인지 알고 싶다. 그래서 나의 작은 예와 당신이 가진 것을 사용하십시오.

export default class Child extends Component { 
    render() { 
    let {name}=this.props; 
    return (
     <li>{name}</li> 
    ); 
    } 
} 

우리의 기본 케이스는 child.childNodes이 존재하는 경우, 우리는 새로운 <ul> 요소 목록을 생성 할 수 있습니다. 그러나 존재하지 않지만 항목이 있으면 <li>을 렌더링하기 만하면됩니다. 더 이상 자식 노드 나 항목이 없어 질 때까지 계속됩니다.

export default class Parent extends Component { 
    renderChild = (child) => { 
    if (child.childNodes) { 
     return (
     <ul> 
      {child.jsonData.map(item => { 
      return this.renderChild(item); 
      })} 
     </ul> 
    ); 
    } 
    else if (child.name) { 
    return <Child name={child.name}/>; 
    } 
    return null; 
    } 

    render() { 
    return (
    <div> 
     <h4>Nested Lists</h4> 
     <ul> 
     {this.renderChild(this.props.jsonData)} 
     </ul> 
    </div> 
); 
}