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>

目前，我的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时遇到了麻烦。

我将如何调整此代码，以便根据存在/未定义的SubNavigation键有条件地呈现item.subnav。

Answer 1

将您的代码更改为：

{
    # Will output to stdout the current user's crontab
  crontab -l;
    # Add a line to execute the php script every 5 minutes
  echo '*/5 * * * * '"$(which php5) /var/www/some/file.php";
} | crontab - # The current user's crontab will be replaced by stdin

Answer 2

你可以试试这个：

compareAssymetrically

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

在React中渲染嵌套导航

3 个答案: