1
我在rails應用程序的視圖中放置react-js-jsx組件。當我檢查元素時，我在控制檯中看到組件的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="https://stackoverflow.com/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>
的佈局/ 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的底部有一個scrip pt標籤是<script src="/assets/components/friend_request_box.js"></script> 這個腳本標籤是另一個在頁面上可見的反應組件。我不知道爲什麼一個人可見，但另一個人是看不見的。