ReactJS 条件组件 - 令牌错误

Question

我是reactjs的新手，并希望将旧的js文件转换为reactjs组件。我已经写出了组件，我现在正在尝试附加相同/相似的 if/else 逻辑结构

但是我收到一个 - 意外的令牌错误？

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 尝试最新尝试 - 获得意外令牌 Lang

return (
  <div>
    <MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
    <Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
    <Spacers />
    {/*  check if the user has an interview upcoming in the next 30 minutes */}
    {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} />
    }
  </div>
)

Answer 1

这样更好：

<div>{this.renderLoginButton()}</div>

并向组件添加一个方法：

  renderLoginButton() {
    if (this.state.isLoggedIn) {
      return <LogoutButton ... />
    } else {
      return <LoginButton ... />
    }
  }

另请查看有关条件渲染 https://facebook.github.io/react/docs/conditional-rendering.html 的文档

Answer 2

试试这个：

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

希望对您有所帮助。