Question

我正在尝试实现设计user_signed_in？在具有if-else条件的jsx文件中，即如果用户登录则显示“logout”，否则如果登出则显示“login”。好像我无法正确实现它。请纠正我。

header.html.erb

<%= react_component("headerBar", {userSignedIn: user_signed_in?}, {prerender:true}) %>

header.js.jsx

var headerBar = React.createClass({
  render: function() {
    return (
      <div>
        <ul className="nav navbar-nav navbar-right">
          if(this.props.userSignedIn) {
          <li><a href="/login"><span className="glyphicon glyphicon-user"></span>  Sign Up</a></li>
          } else {
          <li><a href="/logout"><span className="glyphicon glyphicon-user"></span>  Sign Out</a></li>
          }
          <li><a href="/join"><span className="glyphicon glyphicon-log-in"></span>  Login</a></li>
        </ul>
      </div>
    }
});

Answer 1

在return语句之前声明一个变量，如下所示：

var userIcon = this.props.userSignedIn ? 
<li><a href="/login"><span className="glyphicon glyphicon-user"></span>  Sign Up</a></li> :
<li><a href="/logout"><span className="glyphicon glyphicon-user"></span>  Sign Out</a></li>;

return (
  <ul className="nav navbar-nav navbar-right">
    {userIcon}
  </ul>
);

此处有更多信息：https://facebook.github.io/react/tips/if-else-in-JSX.html

如何使用设计user_signed_in？在react-rails jsx中使用if-else条件

1 个答案: