使用动画时出现 ReactJS 错误

Question

我有一个可用的 ReactJS 应用程序，我正在尝试使用动画 (https://facebook.github.io/react/docs/animation.html)

我正在尝试在添加表格行时将过渡动画应用于表格行。现有的工作渲染如下所示：

return React.DOM.tbody({ valign: 'top' }, rows);

我试过切换到这个：

return React.DOM.tbody({ valign: 'top' }, React.createElement(ReactCSSTransitionGroup, {transitionName: "example"}, rows));

但我现在在控制台中收到警告和错误：

React 尝试在容器中使用重用标记，但校验和 无效。这通常意味着您正在使用服务器渲染 并且在服务器上生成的标记不是客户端的 期待。 React 注入了新的标记来补偿哪些有效，但你 已经失去了服务器渲染的许多好处。相反，图 找出为什么生成的标记在客户端上不同或 服务器。

错误：不变违规：ReactMount：根元素 ID 不同于 reactRootID。

有什么想法吗？

Answer 1

我错过了一些明显的东西。文档说：

默认情况下，ReactTransitionGroup 呈现为 span

所以它在表中创建了无效标记。我已将 component= 属性设置为“tr”，现在可以使用了。