在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"
}]

我想做的是從中呈現以下內容，當subnav鍵存在時，在Products列表項內部有一個嵌套列表：

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

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

// 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 ，但是當item.subnav undefined時item.subnav了麻煩。

我將如何適應這個代碼，使我有條件地渲染SubNavigation基礎上， item.subnav鍵存在/不明確的。

Answer 1

將您的代碼更改為：

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 2

你能試一試嗎：

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