React에서 중첩된 데이터 렌더링

React에서 중첩된 데이터 렌더링

중첩된 메뉴를 렌더링하려면 어떻게 해야 합니까?<ul>다음 예시와 같이 알 수 없는 수의 자녀가 있는 항목이 물체에 반응합니까?

[
  {
    title: "Top level 1",
    slug: "top-level-1",
    children: [
      {
        title: "Sub level 1",
        slug: "sub-level-1",
        children: [
          {
            title: "Sub Sub Level 1"
            slug: "sub-sub-level-1"
          }
        ]
      }
      {
        title: "Sub level 2",
        slug: "sub-level-2"
      }
    ]
  },
  {
    title: "Top level 2",
    slug: "top-level 2"
  }
]

Codesandbox 예시

메뉴 컴포넌트를 반복적으로 호출하면 하위 컴포넌트가 데이터 소품으로 표시 및 전달됩니다.

let data = [
  {
    title: "Top level 1",
    slug: "top-level-1",
    children: [
      {
        title: "Sub level 1",
        slug: "sub-level-1",
        children: [
          {
            title: "Sub Sub Level 1",
            slug: "sub-sub-level-1",
            children: [
              {
                title: "Sub Sub Level 2",
                slug: "sub-sub-level-2"
              }
            ]
          }
        ]
      },
      {
        title: "Sub level 2",
        slug: "sub-level-2"
      }
    ]
  },
  {
    title: "Top level 2",
    slug: "top-level 2"
  }
];

const Menu = ({data}) => {
  return (
    <ul>
      {data.map(m => {
        return (<li>
          {m.title}
          {m.children && <Menu data={m.children} />}
        </li>);
      })}
    </ul>
  );
}

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
    <Menu data={data} />
  </div>
);

깊이가 가변적인 중첩 데이터에 대한 구성요소를 반복적으로 렌더링할 수 있습니다.

샘플 스니펫

var data = [
  {
    title: "Top level 1",
    slug: "top-level-1",
    children: [
      {
        title: "Sub level 1",
        slug: "sub-level-1",
        children: [
          {
            title: "Sub Sub Level 1",
            slug: "sub-sub-level-1"
          }
        ]
      },
      {
        title: "Sub level 2",
        slug: "sub-level-2"
      }
    ]
  },
  {
    title: "Top level 2",
    slug: "top-level 2"
  }
]

const MyComponent  = (props) => {
     if(Array.isArray(props.collection)) {
         return <ul>
               {props.collection.map((data)=> {
                   return <li>
                      <ul>
                        <li>{data.title}</li>
                        <li>{data.slug}</li>
                        <li><MyComponent collection={data.children}/></li>
                      </ul>
                   </li>
               })
               }
         </ul>
     }
     return null;
}

class App extends React.Component {
    render() {
        return (
           <MyComponent collection={data}/>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

추신: 스니펫에 포맷 오류가 포함되어 있습니다만, 정정해 주실 수 있다고 생각합니다.스니펫은 접근법에 대한 아이디어를 제공하는 것이었다.

언급URL : https://stackoverflow.com/questions/45286713/render-recursively-a-nested-data-in-react