Laravel & React，动态渲染

Question

我最近开始使用React，并将其与Laravel结合使用，因为我希望通过一步一步的迁移将我的jquery替换为react。

在我的测试中，渲染指令总是打包在组件.js文件中，如下所示：

ReactDOM.render(<Calculator />, document.getElementById('tutorial'));

并且div <div id="tutorial"></div>被放置在视图中。

我的问题是视图是由我的php代码动态生成的，有时我需要在一个页面中呈现几个组件，所以这种方法不起作用。因此，我想从视图中触发渲染，如下所示：

<div id="tutorial" intruction_to_render_calculator_component_in_this_div></div>

我该怎么做呢？

Answer 1

最近一直在努力寻找解决方案……所以这是我找到的一个：

在我的组件中，我使用一个循环来筛选所有请求基于rComponent属性挂载的元素：

var divs = document.querySelectorAll("[rComponent='Calculator']");
if (divs.length > 0) {
  //document.querySelector("[rComponent='calculator']");
  for (var i = 0; i < divs.length; ++i) {
    ReactDOM.render(<Calculator />, divs[i]);
  }

  //ReactDOM.render(<Calculator />, document.getElementById('tutorial2'));
}

在我看来，我只需要在我的div中放一个rComponent：

<div id="tutorial" rComponent="Calculator"></div>
<div id="tutorial2" rComponent="Calculator"></div>

我对这种工作方式非常满意，尽管我认为这可能会减慢脚本的执行速度