仅在某些页面上使用 react-rails 加载 React 组件

Question

我有一个 ReactJS 组件，我想将其安装到 user/show.html 上的 #test-scores。该组件位于 app/assets/javascripts/react-components/test-score.js.jsx.

如何确保它仅在用户访问 user/show 时加载？它会像现在一样为每个页面加载。

app/assets/javascripts/react-components.js:

//= require_tree ./react-components

app/assets/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.

对我应该如何构建事物有什么建议吗？ :-)

干杯，马丁

Answer 1

这是一个 "good error"，因为它让你在尝试访问它之前知道该节点不存在于 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 组件

Only load React compontent on some pages with react-rails

ruby-on-rails

reactjs

react-rails