[英]ReactJS - Uncaught Error: Syntax error, unrecognized expression
為什么會出現此錯誤:
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 }
有任何想法嗎?
編輯:
push-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 }
示例數據:
{
"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
}]
}
這是因為您的數據被設置為componentDidMount的狀態,該狀態在初始渲染后執行。 因此,要么在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 }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.