Reactjs - mehrere Bedingungen, um Komponenten zu zeigen - wenn/else Blöcke

Question

Ich bin neu zu reactjs und auf der Suche nach einer alten js-Datei in eine reactjs-Komponente zu verwandeln. Ich habe die Komponenten geschrieben, und ich versuche jetzt, um die gleiche/ähnliche hängen if/else Logikstruktur

Ich weiß, Sie also, wenn Logik wie diese

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

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

tun können, sollten Der Code sieht in etwa so aus - mit vielen bedingten Operatoren im Inline-Stil?

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

// alt 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} 

// Strom reagieren js versuchen

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> 
) 

// letzte Versuch - immer unerwartetes Token lang

{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

Ich würde sagen, create Separate Komponente für if und else con bedingungen und dann kann man sie machen, wird es viel mehr klar

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> 
    ) 
}