./src/views/view.jsx Module build failed: SyntaxError: C:/workspace//src/views/view.jsx: Unexpected token (129:41) 127 | 128 | > 129 | if(this.props.playerInfo.fundingDetailId === null) | ^ 130 | { 131 | <div> 132 | <a className="closeButton" onclick={this.hidePopover}>Close</a>
import React, {Component} from 'react';
import {connect} from 'react-redux';
import SportsBody from '../../components/scores/tracker/score-tracker-ira';
import Player from '../../components/player/snapshot/player-snapshot-presenter-ira';
import {setSidebarAppMode} from 'sports-template-standard/lib/redux/layout/layout-actions';
import {updateMenu} from '../../redux/menu/menu-actions';
import {Overlay} from 'sports-modal';
import SportsDefect from 'sports-logger';
import {version} from '../../../package.json';
const sportsDefect = new SportsDefect();
class KickIra extends Component {
constructor(props) {
super(props);
this.state = {popoverIsActive: true};
this.launchGoalDetails = this.launchGoalDetails.bind(this);
this.hidePopover = this.hidePopover.bind(this);
this.sportsFollow = this.sportsFollow.bind(this);
}
componentDidMount() {
sportsDefect.log('IRA Rollover Kick View Loaded Ver:' + version);
}
launchGoalDetails() {
this.props.dispatch(setSidebarAppMode(true));
this.props.dispatch(updateMenu('score-details'));
window.scrollTo(0, 0);
}
**hidePopover() {
console.log("insidePopup")
debugger;
this.setState({popoverIsActive: false});
}**
sportsFollow() {
const urlToLaunch = `/inet/iraRollover/IraRollOver/InvRolloverLandingPage?fundId=${this.props.playerInfo.fundingDetailId}`;
window.open(urlToLaunch, '_self');
}
getHeaderContent() {
const {profile} = this.props;
return (
<span>
<div className="title">WELCOME{profile && profile.firstName && `, ${profile.firstName}`}!</div>
<div className="subTitle">Digital Investment Adviser</div>
</span>
);
}
static basketballContent() {
return (
<p>
If you want to know more about the status of your IRA Rollover, use the link below
to visit the IRA Rollover Tracker on our website.
</p>
);
}
/*static basketballContentNoChange() {
console.log("inside basketballContentNoChange---->");
return (
<div></div>
);
}*/
static popupFooter() {
//debugger;
/*return (
<div>
<a className="closeButton" href="javascript:;" onClick={this.hidePopover}>Close</a>
<a className="iraRollover sports-modal-trigger" href="javascript:;" onClick={this.sportsFollow}>Check Out IRA Rollover Tracker</a>
</div>
);*/
}
/*static popupFooterClose() {
return (
<a className="closeButton" href="javascript:;" onClick={this.hidePopover}>Close</a>
);
}*/
render() {
//console.log("summary-ira this.props.playerInfo.fundingDetailId ---->" + this.props.playerInfo.fundingDetailId);
//debugger;
/*if(this.props.playerInfo.fundingDetailId === undefined || this.props.playerInfo.fundingDetailId === '' ) {
}*/
return (
<span>
<section className="gray-box snapshotContainer">
<div className="flex-container flex-2">
<div className="snapshot flex-item">
<Overlay
className="popover--IRA"
active={this.state.popoverIsActive}
headerTitle={this.getHeaderContent()}
enableCloseShortcuts={true}
maxWidth={800}
onClose={this.hidePopover}
>
<div className="dia-popover-content level1">
<p>
As you requested, we are in the process of rolling over the balance from your qualified plan to your new IRA.
</p>
</div>
<div className="dia-popover-content level2 dia-text-center">
<p>
Feel free to take a look around your new dashboard; this is where we'll show you what's
happening with your new investment player.
</p>
<p>
There isn't much to display yet, so don't let that concern you.
</p>
{/*(this.props.playerInfo.functionDetailId !== null ||
this.props.playerInfo.fundingDetailId !== '' ||
this.props.playerInfo.fundingDetailId !== undefined ) &&
SummaryIra.rolloverContent()*/
if(this.props.playerInfo.fundingDetailId === null)
{
<div>
<a className="closeButton" onclick={this.hidePopover}>Close</a>
<a className="iraRollover usaa-modal-trigger" href="javascript:;" onClick={this.openIRATracker}>Check Out IRA Rollover Tracker</a>
</div>
}
}
</div>
<div className="dia-popover-content level3">
{
this.props.playerInfo.fundingDetailId === null || this.props.playerInfo.fundingDetailId === '' || this.props.playerInfo.fundingDetailId === undefined ?
KickIra.popupFooterClose() :
KickIra.popupFooter()
}
</div>
</Overlay>
<SportsBody />
</div>
<div className="snapshot flex-item">
<Player />
</div>
</div>
</section>
</span>
);
}
}
KickIra.propTypes = {
playerInfo: React.PropTypes.object,
scoreDetails: React.PropTypes.object,
profile: React.PropTypes.object
};
export default connect(state => ({
scoreDetails: state.scoreDetails,
playerInfo: state.player,
profile: state.template.profile
}))(KickIra);
答案 0 :(得分：1)
你不能在JSX中使用if-else，如果你想提出一些条件，那么使用ternary operator或使用functions（当需要检查许多条件时很有帮助使代码更具可读性。）
使用三元运算符：
<div>{1==1 ? 'Hello World' : null}</div>
使用功能：
<div>{this.checkCondition()}</div>
checkCondition(){
if(1==1){
return 'Hello World'
}else{
return null;
}
}
检查fiddle上的示例工作代码：https://jsfiddle.net/sgLywd6m/
参考：http://reactjs.cn/react/tips/if-else-in-JSX.html
查看有关反应类中的静态方法的文章：http://odetocode.com/blogs/scott/archive/2015/02/02/static-members-in-es6.aspx
答案 1 :(得分：0)
您在JSX中不能拥有orig<-data.frame(ItemCode=c(1234,3342,2345), Invoice=c(1111,1134,1231), Quantity=c(12,2,5),
Date=as.Date(c("12/11/04","14/12/04","21/12/04"), format="%d/%m/%y"),
UnitPrice=c(12.9,5,8.99), CustomerID = c(70829,70562,71233))
delt<-data.frame(ItemCode=c(1345,3342,2345), Invoice=rep(NA,3), Quantity=c(-10,-2,-1),
Date=as.Date(c("27/02/05","14/12/04","21/12/04"), format="%d/%m/%y"),
UnitPrice=c(1.99,5,8.99), CustomerID = c(81728,70562,71233))
merged <- merge(orig, delt, by=c("ItemCode", "Date","CustomerID","UnitPrice"), all.x=TRUE)
merged$Quantity = ifelse(is.na(merged$Quantity.y),0,merged$Quantity.y) + merged$Quantity.x
merged[,c("ItemCode", "Date","CustomerID","Invoice.x", "UnitPrice", "Quantity",)]
ItemCode Date CustomerID Invoice.x Quantity
1: 1234 2004-11-12 70829 1111 12
2: 2345 2004-12-21 71233 1231 4
3: 3342 2004-12-14 70562 1134 0
语句，请在此处学习如何进行条件渲染：http://reactjs.cn/react/tips/if-else-in-JSX.html
答案 2 :(得分：0)
您可以使用三元运算符对条件进行编码。 在你的情况下，
{
this.props.playerInfo.fundingDetailId === null) ?
<div>
<a className="closeButton" onclick={this.hidePopover}>Close</a>
<a className="iraRollover usaa-modal-trigger" href="javascript:;"
onClick={this.openIRATracker}>
Check Out IRA Rollover Tracker
</a>
</div>
: 'here else part'
}
对于锚标签onClick方法问题。 要么这样做，
onClick={() => {this.setState({var:'value'}) }}
或者 在构造函数中绑定方法。像
this.method = this.method.bind(this)
答案 3 :(得分：0)
创建自己的IF组件以在JSX中使用：
定义
import React from 'react';
export class IF extends React.Component {
render(){
let lookFor = this.props.condition ? THEN : ELSE;
let children = this.props.children;
if(Array.isArray(children)){
children = children.filter((child) => child.type === lookFor)
} else if(children.type !== lookFor){
children = null;
}
return children;
}
}
export class THEN extends React.Component {
render(){
return this.props.children;
}
}
export class ELSE extends React.Component {
render(){
return this.props.children || null;
}
}
用法：
render(){ return (
<div>
doSomething
<IF condition={this.state.something === true}>
<THEN>
<div> is shown only if condition equals true </div>
</THEN>
<ELSE>
<div> is shown only if condition equals false. ELSE can be omitted.
</ELSE>
</IF>
doMore
</div>
);}
答案 4 :(得分：0)
在JSX中，您可以使用：
<div>
{(() => {
if(this.something){
return <span>something</span>
} else {
return "nothing to see here";
})()}
</div>
或者，如果您不需要“ this”关键字。
<div>
{function() {
if(something){
return <span>something</span>
} else {
return "nothing to see here";
}()}
</div>