如何在Rails/react-rails中通过JavaScript动态创建React组件

你可以直接调用react-rails内置的全局UJS工具实现组件动态创建，和服务端react_component方法的组件解析、渲染逻辑完全一致，不需要额外手动配置ReactDOM渲染逻辑。

实现代码 #

直接在预留的showThing方法中填入对应逻辑即可，支持原生JS和jQuery两种写法：

原生JS版本 #

function showThing(id) {
  const targetContainer = document.getElementById('target');
  // 清空容器原有内容，避免重复挂载
  targetContainer.innerHTML = '';
  // 调用react-rails内置渲染方法
  ReactRailsUJS.render(
    {
      name: 'thing/MyComponent', // 和服务端调用的组件标识完全一致
      props: { company_id: id } // 传入组件需要的参数，和服务端传参格式一致
    },
    targetContainer
  );
}

jQuery版本 #

function showThing(id) {
  const $target = $('#target');
  $target.empty();
  ReactRailsUJS.render(
    {
      name: 'thing/MyComponent',
      props: { company_id: id }
    },
    $target.get(0) // 注意传入原生DOM节点，不能直接传jQuery包装对象
  );
}

补充说明 #

• 只要组件放在app/javascript/components/目录下、符合react-rails默认组件加载规则，就不需要额外做组件注册，上述代码可以直接匹配到对应路径的组件
• 常规安装的react-rails 2.x+版本会自动把ReactRailsUJS挂载到window全局，不需要额外引入
• 如果需要销毁动态挂载的组件，调用ReactRailsUJS.unmountComponentAtNode(目标DOM节点)即可，避免内存泄漏
• 该方案渲染的组件和服务端react_component渲染的组件行为完全一致，props传递、事件绑定、上下文注入都没有差异

内容的提问来源于stack exchange，提问作者cmrichards