Question

我有一个ReactJS组件，我想在#test-scores上挂载到user/show.html。该组件位于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

这是一个很好的错误＆＃34;，因为它让你知道在尝试访问它之前DOM中不存在该节点。您可以轻松检查节点是否首先存在，例如：

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

jQuery有一个沉默错误的坏习惯，但是如果你想使用jQuery，那么这样的东西就可以了：

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

仅在带有react-rails的某些页面上加载React组件

1 个答案: