ReactJS - 不明なエラー：構文エラー、認識できない表現

Question

は、なぜ私はこのエラーが出るん：

Uncaught Error: Syntax error, unrecognized expression: 
#{this.props.item.url} 

NAV-item.jsx：

import React from 'react'; 

class NavItem extends React.Component 
{ 
    render() { 
     if (this.props.item.code == 'contact') { 
      return <li><a href={'#' + this.props.item.url} className="button-open-overlay" data-target-id="{this.props.item.url}">{this.props.item.title}</a></li> 
     } else { 
      return <li><a href={this.props.item.url}>{this.props.item.title}</a></li> 
     } 
    } 
} 

export { NavItem as default } 

任意のアイデア？

EDIT：

プッシュnav.jsx：

import React from 'react'; 
import $ from 'jquery'; 

import NavItem from './nav-item'; 

class PushNav extends React.Component 
{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      navitems: [], 
     }; 
    } 

    // Then fetch the data using $.get(): 
    componentDidMount() { 
     this.serverRequest = $.getJSON(this.props.source, function (result) { 
      this.setState({ 
       navitems: result.nav 
      }); 
     }.bind(this)); 
    } 

    componentWillUnmount() { 
     this.serverRequest.abort(); 
    } 

    render() { 
     var loop = this.state.navitems.map(function(item, index){ 
      return <NavItem key={index} item={item}></NavItem>; 
     }); 

     return (
      <div> 
       <a className="visible-xs button-push-menu" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"> 
        <span className="glyphicon glyphicon-align-justify"></span> 
       </a> 

       <div className="navmenu navmenu-default navmenu-fixed-left offcanvas-sm offcanvas-md offcanvas-lg"> 
        <ul className="push-nav">{ loop }</ul> 
       </div> 
      </div> 
     ) 
    } 
} 

export { PushNav as default } 

例のデータ：データがcomponentDidMountに状態に設定されているため

{ 
    "nav": [{ 
     "navId": "3", 
     "title": "Art", 
     "code": "art", 
     "href": null, 
     "style": null, 
     "sort": "3", 
     "url": "blog", 
     "parentId": null, 
     "totalChildren": "0", 
     "createdOn": null, 
     "updatedOn": null 
    }, { 
     "navId": "4", 
     "title": "Technology", 
     "code": "technology", 
     "href": null, 
     "style": null, 
     "sort": "4", 
     "url": "projects", 
     "parentId": null, 
     "totalChildren": "0", 
     "createdOn": null, 
     "updatedOn": null 
    }, { 
     "navId": "5", 
     "title": "Contact", 
     "code": "contact", 
     "href": null, 
     "style": null, 
     "sort": "5", 
     "url": "contact", 
     "parentId": null, 
     "totalChildren": "0", 
     "createdOn": null, 
     "updatedOn": null 
    }] 
} 

Answer 1

これは、初期レンダリング後に実行されます。だから、どちらかcomponentWillMountにデータを設定したりNavItemコンポーネント

import React from 'react'; 

class NavItem extends React.Component 
{ 
    render() { 
     if (this.props.item === undefined) { 
      return null 
     } else if (this.props.item.code == 'contact') { 
      return <li><a href={'#' + this.props.item.url} className="button-open-overlay" data-target-id="{this.props.item.url}">{this.props.item.title}</a></li> 
     } else { 
      return <li><a href={this.props.item.url}>{this.props.item.title}</a></li> 
     } 
    } 
} 

export { NavItem as default }