用于反应代码的 HTML 中出现的神秘跨度

Posted 2023-03-03

【中文标题】用于反应代码的 HTML 中出现的神秘跨度

【英文标题】：Mysterious span appearing in HTML for react code

【发布时间】：2016-09-09 11:11:26

【问题描述】：

我正在使用 coffeescript 和 react-rails gem。在measure.js.coffee 中，咖啡代码中没有跨度，但是当绘制 html 时，出现了一个神秘的幽灵跨度。下面是它生成的代码和HTML的截图。

在我的代码中，carousel-mImages 和 mtag-images 之间没有跨度。是不是因为reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)

【问题讨论】：

你使用哪个版本的 React ？

【参考方案1】：

是的，ReactCSSTransitionGroup 是 ReactTransitionGroup 的包装。 并来自official docs here：

默认情况下ReactTransitionGroup 呈现为跨度。

您可以更改此行为，并将其呈现为另一种类型的组件，但这意味着您必须手动配置和呈现 ReactTransitionGroup。 这可能会在 DOM 中为您节省一个包装元素，但这取决于您的组件树结构。

【讨论】：

虽然没有意义，但默认包装器应该是din而不是span。有些人可能想要为 div 设置动画，并且在这个幽灵 span 内渲染 div 会破坏 html 验证

你是对的，它会破坏 HTML 验证。但是任何动画仍然可以工作（前提是你的 Css 中有正确的样式）。不知道他们为什么选择<span>。不过你可以改变它。

使用的组件：'div' 来绘制 div 而不是 span

所以现在你应该有<div>而不是<span>，但至少它不再神秘:)