Reactjs - 顯示組件的多個條件 - if/else blocks

Question

我是reactjs的新手，希望將舊的js文件轉換爲reactjs組件。我寫的組件出來，我想現在追加相同/相似的if/else邏輯結構

我知道你可以做，如果邏輯是這樣

return (
    <div> 
    { true && <AddAccount /> } 
    { false && <AccountAdded /> } 
    </div> 
); 

https://facebook.github.io/react/docs/conditional-rendering.html

所以應該代碼看起來像這樣 - 有很多內聯樣式條件運算符？

return (
    <div> 
     {isLoggedIn ? (
     <LogoutButton onClick={this.handleLogoutClick} /> 
    ) : (
     <LoginButton onClick={this.handleLoginClick} /> 
    )} 
    </div> 
); 

//老JS

{if isset($interview)} 

    {* First Information Section *} 
    {* ******************************************** *} 

    {assign var="path" value="/views/video/video_first_section.tpl" } 
    {include file="$base_path$path"} 


    <div class="row show-for-small-only" style="height: 50px;"></div> 

    {* Interview Tips Section *} 
    {* ******************************************** *} 

    {assign var="path" value="/views/video/video_interview_tips.tpl" } 
    {include file="$base_path$path"} 

    {* Conference Calls Section *} 
    {* ******************************************** *} 

    {assign var="path" value="/views/video/video_call.tpl" } 
    {include file="$base_path$path"} 


    {if $user_type eq 'professional'} 

     {* after interview section - professional *} 
     {* ******************************************** *} 

     {assign var="path" value="/views/video/video_after_interview_professional.tpl" } 
     {include file="$base_path$path"} 

    {elseif $user_type eq 'employer'} 

     {* after interview section - employer *} 
     {* ******************************************** *} 

     {assign var="path" value="/views/video/video_after_interview_employer.tpl" } 
     {include file="$base_path$path"} 

    {/if} 

    {* Thank you page *} 
    {* ******************************************** *} 

    {assign var="path" value="/views/video/video_feedback_thank_you.tpl" } 
    {include file="$base_path$path"} 

{else} 

    {* No Interview Page *} 
    {* ******************************************** *} 

    {assign var="path" value="/views/video/video_no_interview.tpl" } 
    {include file="$base_path$path"} 

{/if} 

//當前反應JS試圖

return (
    <div> 
    {/* check if the user has an interview upcoming in the next 30 minutes */} 
    {/* if isset($interview) */} 

     {/* First Information Section */} 
     <VideoFirstSection lang={lang} /> 

     <div className='row show-for-small-only' style={{height: '50px'}} /> 

     {/* Interview Tips Section */} 
     <VideoInterviewTips lang={lang} /> 

     {/* Conference Calls Section */} 
     <VideoCall lang={lang} /> 
     {/* include file="$base_path$path" */} 

     {/* if $user_type eq 'professional' */} 
     {/* after interview section - professional */} 
     <VideoAfterInterviewProfessional lang={lang} /> 
     {/* elseif $user_type eq 'employer' */} 
     {/* after interview section - employer */} 
     <VideoAfterInterviewEmployer lang={lang} /> 
     {/* /if */} 

     {/* Thank you page */} 
     <VideoFeedbackThankYou lang={lang} /> 

    {/* else */} 
     {/* No Interview Page */} 
     <VideoNoInterview lang={lang} /> 
    {/* /if */} 

    </div> 
) 

//最新嘗試 - 讓意外的標記郎

{isset($interview) ? 
    {/* First Information Section */} 
    <VideoFirstSection lang={lang} /> 

    <div className='row show-for-small-only' style={{height: '50px'}} /> 

    {/* Interview Tips Section */} 
    <VideoInterviewTips lang={lang} /> 

    {/* Conference Calls Section */} 
    <VideoCall lang={lang} /> 

    {($userType eq 'professional') ? 
    <VideoAfterInterviewProfessional lang={lang} /> 
    : ($userType eq 'employer') ? 
    <VideoAfterInterviewEmployer lang={lang} /> 
    } 

    {/* Thank you page */} 
    <VideoFeedbackThankYou lang={lang} /> 
: (
    {/* No Interview Page */} 
    <VideoNoInterview lang={lang} /> 
} 

Answer 1

我要說爲if和else con創建單獨的組件揚長避短，然後就可以使它們，就會有很多更清晰

return (
    <div> 
    {/* check if the user has an interview upcoming in the next 30 minutes */} 
    {/* if isset($interview) */} 

    {isset($interview)? <IfComponent/>: <ElseComponent/>} 


    </div> 
) 

IfComponent

render() { 
    return (<div> 
     {/* First Information Section */} 
     <VideoFirstSection lang={lang} /> 

     <div className='row show-for-small-only' style={{height: '50px'}} /> 

     {/* Interview Tips Section */} 
     <VideoInterviewTips lang={lang} /> 

     {/* Conference Calls Section */} 
     <VideoCall lang={lang} /> 
     {/* include file="$base_path$path" */} 

     {($user_type eq 'professional')? <VideoAfterInterviewProfessional lang={lang} />: ($user_type eq 'employer')? <VideoAfterInterviewEmployer lang={lang} />: null } 


     {/* Thank you page */} 
     <VideoFeedbackThankYou lang={lang} /></div> 
    ) 

} 

ElseComponent

render() { 
    return (
     <div> 
     {/* No Interview Page */} 
     <VideoNoInterview lang={lang} /> 
     </div> 
    ) 
}