Question

我第一次在rails应用程序中工作，我正在尝试将前端转换为React。我正在查看此视图，现在我正在使用菜单栏，其中的链接根据用户是否登录而有效。请参阅下面的原始rails erb代码：

<ul class="nav-right-links">
  <% if user_signed_in? %>
    <li><%= link_to 'Account', edit_user_registration_path %></li>
    <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
  <% else %>
    <li><%= link_to 'Sign in', new_user_session_path %></li>
    <li><%= link_to 'Sign up', new_user_registration_path %></li>
  <% end %>
  <li><a href="/connections/help">Help</a></li>
</ul>

我发现这个auth是由名为Devise的rails Gem完成的。我想通过设计保持auth，但我只需要弄清楚如何将一些逻辑放入React中。如果你很好奇，到目前为止我的一些反应代码。现在我只是使用hrefs，但显然它没有响应用户是否登录：

  render () {
    return (
      <div style={styles.container}>
        <ul style={styles.leftNav}>
          {leftLinks.map(link => {
            return (
              <li style={styles.listElement}><a style={styles.link} href={link.path}> {link.name} </a> </li>
            );
          })}
        </ul>
      </div>
    );
  }

非常感谢任何帮助！

Answer 1

我们想要的是一个替换此ERB部分的组件（让我们称之为LoginMenu）。

让我们弄清楚我们将如何摆脱特定的ERB代码，其中有以下结构：

<% if user_signed_in? %> ... <% else %> ... <% end %>
<%= link_to 'Account', edit_user_registration_path %>
<%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %>
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to 'Sign up', new_user_registration_path %>

什么1,2和＆amp; 3所有需要都是user_id（可能是nil）。如果有一个非零的user_id，则＆＃34;用户登录＆＃34;并且用户的id可用于构造编辑和销毁路径。另外两条路径（4,5）是常数值。

所以你的组件需要的是作为prop发送的user_id。然后你可以这样说

if (props["user_id"]) {
  ... build and render the edit and destroy links using the value of props["user_id"]
} else {
  ... build the signin, and signup links
}

你可以制作这样的辅助函数：

edit_user_link: function {
  <a style=... href={"/user/"+props["user_id"]+/edit"} >
}

等...

假设您正在使用react-rails，那么您将拥有

<%= react_component "LoginMenu", user_id: @user ? @user.id : nil %>

此时此页面的大部分内容都不是＆＃34;反应性＆＃34;但根据我们的经验，登录是让反应更难的事情之一，所以现在就这样离开。

仅供参考...如果您刚刚开始，您可能需要考虑http://reactrb.org，这将允许您在ruby中编写客户端代码，因此您不会尝试同时学习网格三种不同的语言（ruby），js，JSX）。

你的ruby组件看起来像这样（这实际上将在Stack Overflow中运行......）

＆＃13;

<script type="text/ruby">
# the above script tag just allows us to run in SO
# In your app User would be your user model, we are just going to stub it here

class User # < ActiveRecord::Base - just stub user for now
  def id
   12
  end
end

# Here is your component.  Normally this would be in the file 
# app/views/components/login.rb by convention

class LoginMenu < React::Component::Base
  param :user, type: User
  def render 
    ul.nav_right_links do
      if params.user #react.rb refers to props as params
        li { a(href: "/user/#{params.user.id}/edit") { "Account" } }
        li { a(href: "/user/#{params.user.id}/delete") { "Delete" } }
      else
        li { a(href: "/user/new") { "Sign Up" } }
        li { a(href: "/user/login") { "Sign In" } }
      end
      li { a(href: "/connections/help") { "Help" } }
    end
  end
end

# the following just fires up our component in stack overflow...
# in your app you would do this in the controller:
# <%= react_component "LoginMenu", user: @user %>

Element['#container'].render { LoginMenu(user: User.new) }

</script>
<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rawgit.com/reactive-ruby/inline-reactive-ruby/master/inline-reactive-ruby.js"></script>

＆＃13;

除了http://reactrb.org有一个很好的基础教程之外，你可以查看这些幻灯片中哪些内容涵盖了rails集成细节：http://slides.com/mitchvanduyn/deck-1

通过Ruby Gem Devise进行JavaScript React身份验证？

1 个答案: