Question

我如何使用嵌套的<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"
  }
]

Answer 1

Codesandbox example

您只需递归调用Menu组件，让其子组件显示并作为数据道具传递。

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>
);

Answer 2

您可以递归渲染具有可变深度的嵌套数据的组件。

示例代码段。

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

P.S。该代码段包含格式错误，但我相信您将能够纠正错误。片段是对方法的概念

在React中递归渲染嵌套数据

2 个答案: