javascript - reactjs中渲染方法内部的条件

Question

• 我是新手。
• 我遇到语法错误，你们能告诉我如何解决吗。
• 在下面提供我的代码。if 条件下我是否遗漏了任何括号

./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);

Answer 1

你不能在 JSX 中使用 if-else，如果你想放置一些条件，那么使用 三元运算符 或使用 函数 (当需要检查很多条件时很有用，它使代码更具可读性)。

使用三元运算符:

<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

查看这篇关于 React 类中的静态方法的文章:http://odetocode.com/blogs/scott/archive/2015/02/02/static-members-in-es6.aspx