Javascript react组件呈现，但在rails应用程序的页面上不可见_Javascript_Ruby On Rails_React Jsx

Javascript react组件呈现，但在rails应用程序的页面上不可见

javascript ruby-on-rails

Javascript react组件呈现，但在rails应用程序的页面上不可见,javascript,ruby-on-rails,react-jsx,Javascript,Ruby On Rails,React Jsx,我将react js jsx组件放在rails应用程序的视图中。当我检查元素时，我在控制台中看到该组件的html标记，但在页面上看不到该组件的任何可见跟踪。html标记如下所示： <div id="notebook"><div data-reactid=".1"> <ul class="dropdown-menu" id="friend-menu" data-reactid=".1.0"> <li data-reactid=".1

我将react js jsx组件放在rails应用程序的视图中。当我检查元素时，我在控制台中看到该组件的html标记，但在页面上看不到该组件的任何可见跟踪。html标记如下所示：

 <div id="notebook"><div data-reactid=".1">
   <ul class="dropdown-menu" id="friend-menu" data-reactid=".1.0">    
    <li data-reactid=".1.0.0"><a data-reactid=".1.0.0.0">where am I?</a></li><li data-reactid=".1.0.1"><a data-reactid=".1.0.1.0">who  am I?</a></li>
    <li data-reactid=".1.0.2"><a data-reactid=".1.0.2.0">where do I need to be?</a></li>
    <li data-reactid=".1.0.3"><a data-reactid=".1.0.3.0">what is the meaning of life?</a></li>
  </ul>
 </div>
</div>



我在哪里？
我是谁
我需要在哪里
生命的意义是什么

我在多个浏览器上进行了测试，得到了相同的结果，组件的html标记不可见

下面列出了javascript组件代码：

var Session = React.createClass({

  // handleSubmitAccept: function(e) {
  //   e.preventDefault();
  //   this.props.onSubmitAccept();
  // },
  // handleSubmitDecline: function(e) {
  //   e.preventDefault();
  //   this.props.onSubmitDecline();
  // },
  render: function () {
    return (
        <li>
          <a>{this.props.answer.questionContent}</a>
        </li>
      )
  }

 });



var Sessions = React.createClass({


  getInitialState: function() {
    return {
      answers: [
        // {id:1, url:"", name:"test user", friendStatus: false},
        // {id:2, url:"", name:"test user 2", friendStatus: true}
      ]
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(data) {
      this.setState({answers: data.currentUser.answers});
    }.bind(this));

  },

  render: function() {
    var self = this;

    return(
      <ul className="dropdown-menu" id="friend-menu">
        {this.state.answers.map(function (answer) {
          return <Session answer={answer} />
        })}
      </ul>
    );
  }
});


var NoteBook = React.createClass({

  render: function() {
    return (
      <div  >
        <Sessions source="/users/1/answers"/>
      </div>
    );
  }
});

React.render(<NoteBook />,  document.getElementById('notebook'));

var Session=React.createClass({
//handleSubmitAccept:函数（e）{
//e.预防违约（）；
//this.props.onSubmitAccept（）；
// },
//HandleSubmit：函数（e）{
//e.预防违约（）；
//this.props.onSubmitDecept（）；
// },
渲染：函数（）{
返回(

{this.props.answer.questionContent}

)
}
});
var Sessions=React.createClass({
getInitialState:函数（）{
返回{
答复:[
//{id:1，url:，名称：“测试用户”，friendStatus:false}，
//{id:2，url:，名称：“测试用户2”，friendStatus:true}
]
};
},
componentDidMount:function（）{
$.get（this.props.source，函数（数据）{
this.setState（{answers:data.currentUser.answers}）；
}.约束（这个）；
},
render:function（）{
var self=这个；
返回(

{this.state.answers.map（函数（answer））{
返回
})}

);
}
});
var NoteBook=React.createClass({
render:function（）{
返回(
);
}
});
React.render（，document.getElementById（'notebook'）；

呈现html标记（但不可见）的视图如下所示：

答案#显示
在app/views/answers/show.html.erb中查找我

layouts/application.html.erb代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>GlobeTrotters</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

  <!--
  <%= javascript_include_tag :defaults, "http://localhost:9292/faye.js" %>
   -->

  <%= csrf_meta_tags %>
</head>
<body>
  <script src="http://d3js.org/queue.v1.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
   <div class="container">

        <ul class="nav nav-tabs">
          <% if show_menu_policy? %>
            <li id="FriendBox" style="margin-top:12px"></li>
          <% end %>
        <!-- component -->

        <li><%= link_to "Globe Trotter's", welcome_index_path %></li>
        <li><%= link_to "About", welcome_about_path %></li>
        <%if current_user%>
          <li id="friend_request"><span class= "glyphicon glyphicon-user" style="margin-top:14px"> </span></li>
        <%end%>
         <%if current_user && current_user.role =="captain" && TeamRelationship.where(receiver_team_id: current_user.team_id ).first%>
               <li><%= link_to "Friend Requested!",team_relationships_path %></li>
         <%end%>
         <%if current_user  && IndividualRelationship.where(receiver_id: current_user.id ).first%>
               <li><%= link_to "Friend Requested!",individual_relationships_path %></li>
         <%end%>
        <div class="pull-right user-info">
           <% if current_user %>
              <%= image_tag(current_user.avatar.tiny.url) if current_user.avatar? %>
             Hello <%= current_user.email %>! <%= link_to "Sign out", destroy_user_session_path, method: :delete %>

           <% else %>
             <%= link_to "Sign In", new_user_session_path %> or
             <%= link_to "Sign Up", new_user_registration_path %>
           <% end %>
         </div>
      </ul>



      <%= yield %>
     </div>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

    <script src="/assets/components/friend_request_box.js"></script>
    <script src="/assets/components/notebook.js"></script>

</body>
</html>


环球旅行者
正确%>







你好
或

正确%>

请注意，在my layouts/application.html.erb的底部有一个脚本标记

此脚本标记是页面上实际可见的另一个react组件。我不知道为什么一个是可见的，而另一个是不可见的

我在其中一个组件中有一个剩余的引导类

className=“dropdown menu”

。一旦我删除，它开始渲染

<!DOCTYPE html>
<html>
<head>
  <title>GlobeTrotters</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

  <!--
  <%= javascript_include_tag :defaults, "http://localhost:9292/faye.js" %>
   -->

  <%= csrf_meta_tags %>
</head>
<body>
  <script src="http://d3js.org/queue.v1.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
   <div class="container">

        <ul class="nav nav-tabs">
          <% if show_menu_policy? %>
            <li id="FriendBox" style="margin-top:12px"></li>
          <% end %>
        <!-- component -->

        <li><%= link_to "Globe Trotter's", welcome_index_path %></li>
        <li><%= link_to "About", welcome_about_path %></li>
        <%if current_user%>
          <li id="friend_request"><span class= "glyphicon glyphicon-user" style="margin-top:14px"> </span></li>
        <%end%>
         <%if current_user && current_user.role =="captain" && TeamRelationship.where(receiver_team_id: current_user.team_id ).first%>
               <li><%= link_to "Friend Requested!",team_relationships_path %></li>
         <%end%>
         <%if current_user  && IndividualRelationship.where(receiver_id: current_user.id ).first%>
               <li><%= link_to "Friend Requested!",individual_relationships_path %></li>
         <%end%>
        <div class="pull-right user-info">
           <% if current_user %>
              <%= image_tag(current_user.avatar.tiny.url) if current_user.avatar? %>
             Hello <%= current_user.email %>! <%= link_to "Sign out", destroy_user_session_path, method: :delete %>

           <% else %>
             <%= link_to "Sign In", new_user_session_path %> or
             <%= link_to "Sign Up", new_user_registration_path %>
           <% end %>
         </div>
      </ul>



      <%= yield %>
     </div>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

    <script src="/assets/components/friend_request_box.js"></script>
    <script src="/assets/components/notebook.js"></script>

</body>
</html>