0

我有一个想要挂载到的 ReactJS#test-scores组件user/show.html。该组件位于app/assets/javascripts/react-components/test-score.js.jsx.

如何确保仅在用户访问时才加载user/show?它现在是为每个页面加载的。

应用程序/资产/javascripts/react-components.js:

//= require_tree ./react-components

应用程序/资产/javascripts/react-components/test-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.

关于我应该如何构建事物的任何建议?:-)

干杯,马丁

4

1 回答 1

0

这是一个“好错误”,因为它让您在尝试访问之前知道该节点在 DOM 中不存在。您可以轻松检查节点是否首先存在,例如:

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

jQuery 有一个忽略错误的坏习惯,但是如果你想使用 jQuery,这样的事情会起作用:

$('#test-scores').each(function() {
    React.render(<TestResultBox />, this);
})
于 2015-03-25T13:12:07.690 回答