Question

我将一个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'));

呈现html标记（但不可见）的视图在这里：

<h1>Answers#show</h1>
<p>Find me in app/views/answers/show.html.erb</p>
<div id="notebook"></div>

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>

请注意，在layouts / application.html.erb的底部有一个脚本标记<script src="/assets/components/friend_request_box.js"></script>此脚本标记是另一个在页面上实际可见的反应组件。我不知道为什么一个是可见的但另一个是看不见的。

Answer 1

我在其中一个组件中有一个遗留引导类className="dropdown-menu"。一旦我删除它，它开始渲染。

反应组件渲染但在rails app中的页面上不可见

1 个答案: