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

// old 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条件创建Separate组件然后你可以渲染它们，它会更清晰

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

Reactjs - 显示组件的多个条件 - if / else块

1 个答案: