ReactJS：如何添加不受支持的 React 组件（JSX 标签）？答案

【问题标题】：ReactJS: How to add an unsupported React component (JSX tag)?ReactJS：如何添加不受支持的 React 组件（JSX 标签）？
【发布时间】：2014-10-18 06:28:59
【问题描述】：

在 ReactJS 中还没有定义一些标签，例如 SVG 命名空间中的 <animate>。

React.DOM.div 和 React.DOM.span 这样的基本节点在 React 中是如何定义的？或者像<div>和<span>这样的基本标签在JSX中是如何定义的？

我可以使用相同的方法来扩展 React 来定义标准的<animate> 标签吗？我不想分叉和扩展 React Github 项目。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

最简单（也是最丑陋）的方法是使用 dangerouslySetInnerHTML 进行渲染：http://facebook.github.io/react/docs/jsx-gotchas.html 您只需将 <animate> 标记生成为字符串，并将其作为 innerHTML 传递给包装 div。

否则，您需要深入研究 React 内部结构，即 ReactDOM.js 中的 createDOMComponentClass 函数。如果你真的走那么远，我敢打赌你可以请求一个拉取请求来合并标签。

【讨论】：

我不能将标签与任何其他标签一起包装，因为 SVG 动画总是与其父元素相关。
为了让这稍微不那么可怕，您还可以自己制作一个名为“animate”的反应组件，它本质上使用逻辑包装 dangerouslySetInnerHTML 以从发送的道具生成正确的字符串。这使您可以在其他组件中“正常”使用，并在需要时有一个中心区域来调试它。当我这样做时，我还在 React.createClass() 调用之前进行了一点检查，以检查 React.DOM.animate 是否存在，如果存在，那么在开发人员模式下它会给我一个错误，所以如果我更新到一个版本包括它，它会告诉我:)
我觉得很有趣，这么简单的事情在 React 中很难实现。
这是 SVG 如此巨大而奇怪的一个不幸的副作用。我们在人们需要时添加了很多标签，但完全支持实际上很烦人。我们希望在未来朝着更好的模型迈进——我们知道 SVG 绝对是向前迈进的重要一步！