は `retrieveSportsDetails`関数をディスパッチしますが、` if`条件の記述方法がわかりません

Question

私は新しい反応を示します。私はレフィックスを使用しています。私は、レデューサーでそれを使用してアクションとレデューサーを作成しています。私は状態を設定しています。それが本当であれば、私は関数renderAutomaticSportsを表示するか、関数renderAutomaticSportsをcomponentWillMountに表示しないでください。

retrieveSportsDetails機能をディスパッチしていますが、ifの書き込み方法はわかりません。

• 君たちは 条件

  componentWillReceiveProps（nextProps）{ & nextProps.state.isAutomaticSportsSet &（もし！場合は、この内部のレンダリング機能を置く方法を伝えることができthis.props.profile.isAutomaticSportsSet ）{ // renderAutomaticDeposit（）; }}

コードスニペットは以下です。手伝って頂けますか？

import React, {Component} from 'react'; 
import {moneyFormat} from '../../common/mixin-money-format'; 
import {connect} from 'react-redux'; 
import moment from 'moment'; 
import '../../../css/basketball-tracker-tile.css'; 
import {retrieveSportsDetailsRequest} from '../../../redux/activity/details/activity-details-actions'; 
import {retrieveSportsDetails} from '../../../redux/automatic-deposits/automatic-deposits-actions'; 


class sportsProfile extends Component { 

    constructor(props) { 
     super(props); 

     this.editHandler = this.editHandler.bind(this); 
    } 

    editHandler() { 
     this.props.onEdit(); 
    } 

    renderProgressError() { 
     return (
      <div className="text-center negative"> 
       Account Information Unavailable 
      </div> 
     ); 
    } 

    componentWillMount() { 
     //debugger; 
     this.props.dispatch(retrieveSportsDetails()); 

    } 

    renderProgress(data) { 
     const circumferenceOfCircle = 1131; 
     // negative or no growth 
     const progressMade = Math.floor((data.accumulatedAmount * 100)/data.basketballAmount) || 0; 

     let progressMadePercent = ((progressMade/100) * circumferenceOfCircle); 
     let achievementStyle; 
     let growthAngle = 'rotate(-90 208.6 206.4)'; 

     if (data.accumulatedAmount > data.basketballAmount) { 
      // exceed the expected growth 
      achievementStyle = 'platinumAchievementCircle'; 
     } else if (data.accumulatedAmount > 0) { 
      // positive growth 
      achievementStyle = 'goldAchievementCircle'; 
     } else { 
      // negative growth 
      achievementStyle = 'negAchievementCircle'; 
      growthAngle = 'rotate(150 208.6 206.4)'; 

      // doing this for the purpose of showing the negative growth 
      progressMadePercent = -progressMadePercent; 
     } 

     const progressMadeStyle = { 
      strokeDasharray: progressMadePercent + ' ' + circumferenceOfCircle 
     }; 

     return (
      <div className="progress_container"> 
       <svg x="0px" y="0px" viewBox="0 0 420 420"> 
        <circle id="blue_circle" className="blueBackCircle" cx="208.6" 
         cy="206.4" r="180.2" 
        /> 
        <path id="track" className="blueTrackCircle" 
         d="M208.6,35.7c-94.3,0-170.7,76.4-170.7,170.7s76.4,170.7,170.7,170.7s170.7-76.4,170.7-170.7 
          S302.9,35.7,208.6,35.7z M208.6,368.6C119,368.6,46.4,296,46.4,206.4S119,44.3,208.6,44.3s162.2,72.6,162.2,162.2 
          S298.2,368.6,208.6,368.6z" 
        /> 
        <circle 
         id="golden_progress_circle" className={achievementStyle} 
         style={progressMadeStyle} cx="208.6" cy="206.4" 
         r="180.2" transform={growthAngle} 
        /> 
       </svg> 
       <div className="progress_number"> 
        {progressMade}% <span className="accessibility-hidden">basketball progress</span> 
       </div> 
      </div> 
     ); 
    } 


    renderTarget() { 
     const name = this.props.profile.firstName; 
     return (
      <div className="alert-box action-shadow"> 
       <h4>{`Want some advice${name && name.length > 0 ? `, ${name}` : ''}?`}</h4> 
       <p>Stay focused by setting a target date for completion of your basketball.</p> 
       <div className="secondary-links section_content"> 
        <a href="javascript:;" onClick={this.editHandler}>Set Target Date</a> 
       </div> 
      </div> 
     ); 
    } 

    renderAutomaticSports() { 
     const name = this.props.profile.firstName; 
      return (
       <div className="alert-box action-shadow"> 
        <h4>{`Want a helpful tip${name && name.length > 0 ? `, ${name}` : ''}?`}</h4> 
        <p>Add some momentum to your account by setting up automatic recurring deposits.</p> 
        <div className="secondary-links section_content"> 
         <a href="javascript:;" onClick={this.editHandler}>Set Up Automatic Sportss</a> 
        </div> 
       </div> 
      ); 
    } 

    renderGoalDate(basketballEndDate) { 
     return (
      <div> 
       <h3 className="top15">Goal Target Date</h3> 
       <p> 
        {moment(basketballEndDate).format(sportsProfile.static.displayDateFormat)} 
       </p> 
      </div> 
     ); 
    } 

    render() { 
     const {basketballDetails, data} = this.props; 
     const basketballAmount = parseFloat(basketballDetails.basketballAmount); 
     const accumulatedAmount = data.summary.total || 0; 

     return (
      <div> 
       <div className="content-box action-shadow"> 
        { 
         basketballDetails.error ? 
          this.renderProgressError() : 
          this.renderProgress({ 
           accumulatedAmount, 
           basketballAmount 
          }) 
        } 
        <div className="section_content"> 
         <h2>Your Goal Progress</h2> 
         <p>You have accumulated <strong className={accumulatedAmount >= 0 ? null : 'negative'}> 
          {moneyFormat(accumulatedAmount)}</strong> towards your basketball of <strong> 
          {moneyFormat(basketballAmount)}</strong>. 
         </p> 
         { 
          basketballDetails.basketballDate && basketballDetails.basketballDate.length > 0 && 
          basketballDetails.basketballDate !== '2199-01-01' && this.renderGoalDate(basketballDetails.basketballDate) 
         } 
         <div className="secondary-links section_content"> 
          <a href="javascript:;" onClick={this.editHandler}>Edit Goal Details</a> 
         </div> 
        </div> 
       </div> 
       {basketballDetails.basketballDate && basketballDetails.basketballDate.length > 0 && basketballDetails.basketballDate !== '2199-01-01' ? 
        this.renderAutomaticSports() : this.renderTarget()} 
      </div> 
     ); 
    } 
} 

sportsProfile.propTypes = { 
    data: React.PropTypes.object.isRequired, 
    basketballDetails: React.PropTypes.shape({ 
     error: React.PropTypes.object, 
     basketballId: React.PropTypes.number, 
     basketballName: React.PropTypes.string, 
     basketballAmount: React.PropTypes.number, 
     basketballDate: React.PropTypes.string, 
     isRetrieving: React.PropTypes.bool 
    }), 
    onEdit: React.PropTypes.func.isRequired, 
    profile: React.PropTypes.object 
}; 

sportsProfile.static = { 
    displayDateFormat: 'MMM-YYYY' 
}; 


export default connect(state => ({ 
    profile: state.template.profile, 
    deposit: state.isAutomaticSportsSet 
}))(sportsProfile); 

---

減速：

import {CONSTANTS} from './automatic-deposits-actions'; 

const initialState = Object.freeze({ 
    'deposit': false, 
    'isRetrieving': true, 
    'error': null 
}); 

console.log("inside-automatic-deposits-------->"); 

export default function isAutomaticSportsSet(state = initialState, action) { 
    switch (action.type) { 
     case CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT: 
      return Object.assign({}, state, { 
       error: null, 
       isRetrieving: true, 
       accountId: action.accountId 
      }); 
      console.log("CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT"); 

     case CONSTANTS.RETRIEVE_ACTIVITY_SUCCESS: 
      return Object.assign({}, state, { 
       deposit: action.response, 
       error: null, 
       isRetrieving: false 
      }); 
      console.log("CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT"); 

     case CONSTANTS.RETRIEVE_ACTIVITY_FAILED: 
      return Object.assign({}, state, { 
       error: action.error, 
       isRetrieving: false 
      }); 
      console.log("CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT"); 

     default: 
      return state; 
      console.log("CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT"); 

    } 
} 

---

アクション：

import * as Service from '../../components/common/services'; 

console.log("inside-automatic-actions"); 

const CONSTANTS = Object.freeze({ 
    RETRIEVE_ACTIVITY_ATTEMPT: 'retrieve_activity_attempt', 
    RETRIEVE_ACTIVITY_SUCCESS: 'retrieve_activity_success', 
    RETRIEVE_ACTIVITY_FAILED: 'retrieve_activity_failed' 
}); 

const depositActivityRequest = (accountId) => { 
    return {accountId, type: CONSTANTS.RETRIEVE_ACTIVITY_ATTEMPT}; 
}; 

const depositActivityRequestSuccess = (response) => { 
    return {response, type: CONSTANTS.RETRIEVE_ACTIVITY_SUCCESS}; 
}; 

const depositActivityRequestFailure = (error) => { 
    return {error, type: CONSTANTS.RETRIEVE_ACTIVITY_FAILED}; 
}; 

const retrieveSportsDetails = (accountId) => { 
    return (dispatch, getState) => { 
     dispatch(depositActivityRequest(accountId)); 
     //debugger; 
     return Service.retrieveSportsDetails(getState()); 
    }; 
}; 

const retrieveSportsDetailsRequest = (accountId) => { 
    return dispatch => { 
     return dispatch(retrieveSportsDetails(accountId)) 
      .then(
       response => { 
        const activityList = response.data; 
        dispatch(depositActivityRequestSuccess(activityList)); 
       }, 
       error => { 
        //TODO add logging 
        //sportsLogger.error(error, 'Error retriving Activity details for the deposit'); 
        dispatch(depositActivityRequestFailure(error)); 
       } 
      ); 
    }; 
}; 

export { 
    retrieveSportsDetailsRequest, retrieveSportsDetails, CONSTANTS 
}; 

Answer 1

ザ条件（レンダリングの一部であるかどうか）。

let sportsComponent; 
if (true) { 
    sportsComponent = this.renderAutomaticSports(); 
} 

sportsComponentを表示するには、JSXに組み込みます。

{ sportsComponent }