如何移除React on Rails渲染组件时自动生成的额外包裹div

你看到的额外包裹div不是React生成的，是react_on_rails gem渲染组件时默认插入的占位根节点，id格式{组件名}-react-component-{uuid}是这个gem的默认标识规则，和React本身的渲染逻辑无关。

按推荐优先级排序：

• 单组件配置取消包裹（v11.0.0+版本支持）
  在Rails视图中调用react_component辅助方法时，传入tag: nil参数即可关闭自动生成的包裹节点，组件会直接渲染到父容器下：

  <%# 原调用方式 %>
  <%= react_component("ComponentName", props: your_props) %>
  
  <%# 修改后，无额外包裹层 %>
  <%= react_component("ComponentName", props: your_props, tag: nil) %>
  

  注意：如果组件返回的是多平级节点的Fragment（无单一根节点），不能用tag: nil，可以直接给tag参数指定你需要的根标签类型，同时把原有根节点的class、id等属性直接配置在helper上，组件内部不再重复写根节点，保证最终DOM结构和预期一致：

  <%= react_component("ComponentName", props: your_props, tag: "div", class: "styling-classes") %>
  

  对应组件代码简化为：

  const ComponentName = () => {
    return <SubComponentName />
  }
  

• 全局配置默认取消包裹
  如果项目中所有组件都不需要默认包裹层，可以直接修改全局配置，打开config/initializers/react_on_rails.rb文件，添加如下配置：

  ReactOnRails.configure do |config|
    # 其他原有配置...
    config.react_component_placeholder_tag = nil
  end
  

  配置后所有react_component调用默认不会生成额外包裹div。
• 低版本兼容方案
  如果你使用的react_on_rails版本低于11.0.0，不支持tag配置参数，直接把原有根节点的class、id等属性全部配置在react_component调用上，同时删除组件内部重复的根div即可，最终渲染出的单一根节点会直接携带你需要的样式类，不会影响历史CSS选择器匹配：

  <%= react_component("ComponentName", props: your_props, class: "styling-classes") %>
  

禁止使用手动操作DOM删除包裹节点的方案：这种方式会导致React虚拟DOM与真实DOM结构不匹配，后续组件更新、事件绑定、状态渲染时会出现不可预期的DOM错乱问题，排查修复成本极高。

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