Question

我正在尝试构建一个动态的NavBar组件，它从React Routes渲染，我接收路由作为道具，然后构建一个数组渲染为导航组件，但html根本不渲染

以下是代码

import React from 'react';
import { Link } from 'react-router';

class NavBarComponent extends React.Component {
  constructor() {
    super();
    this.routeList = [];
  }
  _getDisplayName(route) {
    let name = null;

    if (typeof route.getDisplayName === 'function') {
      name = route.getDisplayName();
    }

    if (route.indexRoute) {
      name = name || route.indexRoute.displayName || null;
    } else {
      name = name || route.displayName || null;
    }

    //check to see if a custom name has been applied to the route
    if (!name && !!route.name) {
      name = route.name;
    }

    //if the name exists and it's in the excludes list exclude this route
    //if (name && this.props.excludes.some(item => item === name)) return null;

    if (!name) {
      name = "";
    }

    return name;
  }

  _checkAddRoutes(route, isRoot) {
    let name = this._getDisplayName(route);
    let exist = this.routeList.find(y => y.path === route.path);
    if (exist == null && name && route.path) {
      if (!isRoot) {
        name = '/' + name;
      }
      this.routeList.push({ "path": route.path, "name": name });
    }
  }
  _buildRoutes(routes) {
    routes.forEach((_route) => {
      let isRoot = routes[1] && !routes[1].hasOwnProperty("path");
      let route = Object.assign({}, _route);
      if (typeof _route.prettifyParam === 'function') {
        route.prettifyParam = _route.prettifyParam;
      }
      if (isRoot && !route.path) {
        route.path = '/';
      }
      this._checkAddRoutes(route, isRoot);
      if (isRoot && route.childRoutes && route.childRoutes.length) {
        let cls = this;
        route.childRoutes.forEach(chilRoute => {
          cls._checkAddRoutes(chilRoute);
        });
      }
    });

  }

  renderListItem(item) {
    return <li>  <Link to="/about" activeClassName="sui-active">{item.name}</Link> </li>;
  }
  renderList() {
    if (this.routeList && this.routeList.length) {
      return this.routeList.map(item => this.renderListItem(item));
    }
    return [];
  }
  render() {
    this._buildRoutes(this.props.routes);
    return (
      <ul className="sui-navbar sui-border sui-round">
        {this.renderList}
      </ul>
    );
  }
}
NavBarComponent.propTypes = {
  routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
};
module.exports = NavBarComponent;

Answer 1

是的，

我发现我必须调用函数

  {this.renderList()}

构建后反应JS渲染列表

1 个答案: