在 React 中渲染嵌套导航答案

【问题标题】：Rendering a nested navigation in React在 React 中渲染嵌套导航
【发布时间】：2016-02-27 18:27:36
【问题描述】：

我的网站导航具有以下数据结构。这只是一个 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。

【问题讨论】：

标签： javascript reactjs javascript-objects

【解决方案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>

【讨论】：

【解决方案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>
  );
}

【讨论】：

【解决方案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>
        );
    }
}

【讨论】：