1
我是reactjs的新手,希望将旧的js文件转换为reactjs组件。我写的组件出来,我想现在追加相同/相似的if/else逻辑结构Reactjs - 显示组件的多个条件 - if/else blocks
我知道你可以做,如果逻辑是这样
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} />
}
^我已经更新了我的例子 - 我得到 - 意外令牌lang –
收到错误 - 意外令牌 –