在React中遞歸渲染一個嵌套數據

我如何去渲染一個菜單，嵌套<ul>項目與未知數量的孩子在一個對象的反應如下例所示？在React中遞歸渲染一個嵌套數據

[ 
    { 
    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" 
    } 
]

來源

2017-07-24 Samuel

兩個問題：1.你有沒有試圖自己做這個？ 2.嵌套的深度是否已知因素？ –

是的，我試了幾件不同的事情。我能夠使用'.map（）渲染頂層項目，但是我似乎無法理解如何渲染子項。理想情況下，我希望解決方案能夠呈現兒童，無論深度如何。 – Samuel

如果您希望能夠遍歷深度未知的對象，則需要使用遞歸。你需要創建一個函數，將一個對象和一個累加器作爲參數。該函數將檢查提供的對象上的'.children'，並以每個子對象作爲參數來調用它自己，不要忘記累加器！如果提供的對象不具有.children屬性，則它是一個葉節點，您可以使用它的信息生成組件。累加器是遞歸函數將用於構建最終集合的內容。 –

Codesandbox example

你只需要遞歸調用菜單組件及其子展示和傳遞的數據支撐。

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

來源

2017-07-24 18:08:24

這真是太棒了，有沒有一種簡單的方法可以將子彈支柱傳遞給兒童組件，從而形成「頂級-1 /次級-1 /次級-1」？ – Samuel

您可以遞歸地呈現具有可變深度的嵌套數據的組件。

Sample Snippet。

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>

附：該片段包含格式錯誤，但我相信您將能夠糾正該錯誤。片段是給出一個想法的方法

來源

2017-07-24 18:18:46

在React中遞歸渲染一個嵌套數據

回答

相關問題