Javascript reactjs条件组件-令牌错误

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

但我得到了一个意外的令牌错误

那么代码应该是这样的吗？有很多内联风格的条件运算符

  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}

{if isset（$interview）}
{*第一信息节*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u first\u section.tpl”}
{include file=“$base_path$path”}
{*面试技巧部分*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u interview\u tips.tpl”}
{include file=“$base_path$path”}
{*电话会议部分*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u call.tpl”}
{include file=“$base_path$path”}
{如果$user_type eq'professional'}
{*面试后部分-专业*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u after\u interview\u professional.tpl”}
{include file=“$base_path$path”}
{elseif$user_type eq'employer'}
{*面试后部分-雇主*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u after\u interview\u employer.tpl”}
{include file=“$base_path$path”}
{/if}
{*谢谢你，第页*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u feedback\u thanky\u you.tpl”}
{include file=“$base_path$path”}
{else}
{*无采访页*}
{* ******************************************** *}
{assign var=“path”value=“/views/video/video\u no\u interview.tpl”}
{include file=“$base_path$path”}
{/if}

//当前尝试 //最新尝试-获取意外的令牌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>
)

返回(
{/*检查用户在接下来的30分钟内是否有面试*/}
{isset（$采访）？
{/*第一信息部分*/}
{/*面试技巧部分*/}
{/*电话会议部分*/}
{（$userType eq'professional'）？
：（$userType eq‘雇主’）？
}
{/*谢谢你，第*/}
: (
{/*无采访页面*/}
}
)

最好是这样：

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

{this.renderLoginButton（）}

并向组件添加一个方法：

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

renderLoginButton（）{
if（this.state.isLoggedIn）{
返回
}否则{
返回
}
}

还要检查条件呈现上的文档

请尝试以下操作：

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

返回(
{isLoggedIn&&}
{！isLoggedIn&&}
);

---

希望有帮助。

\这并不能解决我的问题-这是一个嵌套的if-else条件-带有一个似乎没有呈现的参数问题似乎是语法错误：您在

之前没有条件-如果您尝试呈现两个logout按钮-您将如何处理它-并为每个参数指定您需要的w说唱歌手…在

return

函数中…例如，所有内容都需要在单个

div

中。但是，标记lang不会被识别\uuuu它太简单，并且与我的核心if-else嵌套情况无关猜测变量isLoggedIn会返回一个您可能按照建议处理的布尔值。--登录是一个n示例--这不是我的示例它很重要-我的示例要复杂得多您可以将

{isLoggedIn&&}

替换为

{isLoggedIn&&}

，并且您喜欢的任何组件都可以是复杂的组件。