在React中呈現嵌套導航

Question

我的網站導航具有以下數據結構。這僅僅是一個JSON對象：

[{ 
    "path": "/", 
    "name": "Home" 
}, { 
    "path": "/products", 
    "name": "Products", 
    "subnav": [{ 
    "path": "/sharing-economy", 
    "name": "Sharing Economy" 
    }, { 
    "path": "/pre-employment-screening", 
    "name": "Pre-Employment Screening" 
    }, { 
    "path": "/kyc-and-aml", 
    "name": "KYC & AML" 
    }] 
}, { 
    "path": "/checks", 
    "name": "Checks" 
}, { 
    "path": "/company", 
    "name": "Company" 
}] 

我希望做的是呈現由它下面的，具有Products列表項的內部嵌套列表時subnav關鍵是存在：

<ul> 
    <li>Home</li> 
    <li>Products 
    <ul> 
     <li>Sharing Economy</li> 
     <li>Pre-Employment Screening</li> 
     <li>KYC & AML</li> 
    </ul> 
    </li> 
    <li>Checks</li> 
    <li>Company</li> 
</ul> 

目前，我的陣營代碼如下所示：

// This is the data structure from above 
import navigation from '../data/navigation.json' 

const SubNavigation = (props) => { 
    // Here I’m trying to return if the props are not present 
    if(!props.subnav) return 
    props.items.map((item, index) => { 
    return <Link key={index} to={item.path}>{item.name}</Link> 
    }) 
} 

class Header extends React.Component { 

    render() { 
    return (
     <header className='header'> 
     {navigation.map((item, index) => { 
      return(
      <li key={index}> 
       <Link to={item.path}>{item.name}</Link> 
       <SubNavigation items={item.subnav}/> 
      </li> 
     ) 
     })} 
     </header> 
    ) 
    } 
} 

export default Header 

我使用的是無狀態的功能組件來渲染SubNavigation，howev呃當item.subnav是undefined時遇到麻煩。

我該如何改編此代碼，以便根據item.subnav密鑰存在/未定義來有條件地呈現SubNavigation。

Answer 1

你可以試試這個：

<header className='header'> 
    {navigation.map((item, index) => { 
     return(
     <li key={index}> 
      <Link to={item.path}>{item.name}</Link> 
      { item.subnav && <SubNavigation items={item.subnav}/> } 
     </li> 
    ) 
    })} 
    </header> 

Answer 2

更改您的代碼：

const SubNavigation = (props) => { 
    // Here I’m trying to return if the props are not present 
    if(!props.items) return null; 
    return (<ul> 
     {props.items.map((item, index) => { 
     return <Link key={index} to={item.path}>{item.name}</Link> 
     })} 
    </ul> 
); 
} 

Answer 3

嘗試以下操作：

import _ from 'underscore'; 

class Link extends React.Component 
{ 
    static defaultProps = { 
     to: '/hello' 
    }; 

    static propTypes = { 
     to: React.PropTypes.string 
    }; 

    render() { 
     var props = _.omit(this.props, 'to'); 
     return (
      <a href={this.props.to} {... this.props} /> 
     ); 
    } 
} 

class Header extends React.Component 
{ 
    static defaultProps = { 
     nav: [{"path":"/","name":"Home"},{"path":"/products","name":"Products","subnav":[{"path":"/sharing-economy","name":"Sharing Economy"},{"path":"/pre-employment-screening","name":"Pre-Employment Screening"},{"path":"/kyc-and-aml","name":"KYC & AML"}]},{"path":"/checks","name":"Checks"},{"path":"/company","name":"Company"}] 
    }; 

    static propTypes = { 
     nav: React.PropTypes.array 
    }; 

    render() { 
     var props = _.omit(this.props, 'nav'); 
     return (
      <header className="header" {... props}> 
       {this.renderNav(this.props.nav)} 
      </header> 
     ) 
    } 

    renderNav(items, props = {}) { 
     return (
      <ul {... props}> 
       {items.map((v, k) => this.renderNavItem(v, {key: k}))} 
      </ul> 
     ); 
    } 

    renderNavItem(item, props = {}) { 
     return (
      <li {... props}> 
       <Link to={item.path}> 
        {item.name} 
       </Link> 
       {item.subnav ? this.renderNav(item.subnav) : null} 
      </li> 
     ); 
    } 
}