只有载荷时某些页面上有反应护栏

Question

我有一个ReactJS成分，我想安装到#test-scores上user/show.html compontent。 组件住在app/assets/javascripts/react-components/test-score.js.jsx。

我怎样才能确保它只是加载当用户访问user/show？ 它加载的每一页，因为它是现在。

应用程序/资产/ Javascript角/反应-components.js：

//= require_tree ./react-components 

应用程序/资产/ Javascript角/反应组分/测试score.js.jsx

1 $(document).ready(function() { 
    2 
    3 var TestResultBox = React.createClass({ 
    4  loadTestScoreFromServer: function() { 
    5  $.ajax({ 
    [snipp...] 
74 React.render(
75  <TestResultBox />, 
76  document.getElementById('test-scores') 
77 ); 

这导致一个JS错误，打破其他东西：

react.js?body=1:20238 Uncaught Error: Invariant Violation: 
_registerComponent(...): Target container is not a DOM element. 

到我如何组织的事情有什么建议？ :-)

干杯， 马丁

Answer 1

这是一个“很好的错误”，因为它让你知道你尝试访问它之前的节点不在DOM存在的。您可以轻松地检查节点首先存在，是这样的：

var scores = document.getElementById('test-scores') 
if (scores) { 
    React.render(<TestResultBox />, scores); 
} 

的jQuery有silenting错误的坏习惯，但如果你想使用jQuery来代替，像这样的工作：

$('#test-scores').each(function() { 
    React.render(<TestResultBox />, this); 
})