Question

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

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

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

代码看起来应该是这样的 - 有很多内联样式条件运算符吗？

JOIN

// old js

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

//当前反应js尝试 //最新尝试 - 获得意外的令牌lang

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

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

希望它有所帮助。

reactjs条件组件 - 令牌错误

2 个答案: