React JSX 中的自定义 HTML 元素标记答案

【问题标题】：Custom HTML Element Tag within React JSXReact JSX 中的自定义 HTML 元素标记
【发布时间】：2015-01-29 20:07:51
【问题描述】：

我们正在使用一个使用自定义元素的组件库。这要求我们在 JSX 中使用自定义 HTML 标签。举个很简单的例子：

var App = React.createClass({
   render: function() {
       return <niner/>;
   }
});

React.render(
        <App/>,
        document.getElementById('content')
);

在这种特殊情况下，我只需要 React 输出一个 niner 标签，而不需要它尝试对它做任何特别的事情。我故意没有更多的 React 组件。

根据JSX in depth，

React 的 JSX 使用大写与小写的约定来区分本地组件类和 HTML 标签。

这让我相信 ReactJS 只会把 <niner/> 当作一个普通的 HTML 标签，而不是被它卡住。但是，当我运行上面的代码时，出现以下错误：

Uncaught TypeError: Cannot read property 'replace' of undefined 10734305_1719965068228170_722481775_n.js:94
createSourceCodeErrorMessage 10734305_1719965068228170_722481775_n.js:141
transformCode 10734305_1719965068228170_722481775_n.js:187 
run 10734305_1719965068228170_722481775_n.js:242
check 10734305_1719965068228170_722481775_n.js:295
loadScripts 10734305_1719965068228170_722481775_n.js:324 
runScripts

我需要做一些魔法才能让它工作吗？谢谢。

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案1】：

你不需要做任何事情。我刚试过这个

var ComponentExample = React.createClass({
    render: function() {
      return (
          <niner>This is a niner element</niner>
      )
    }
});


React.render(<ComponentExample/>, mountNode);

因此，不，您不需要任何魔法即可使其工作。也许是你捆绑的方式有问题？

希望对你有帮助:)

【讨论】：

谢谢拉蒙。他们最近添加了对此的支持，因此不再需要魔法（正如您所指出的）。
这总是可以安全使用吗？

【解决方案2】：

你必须做类似的事情

<div dangerouslySetInnerHTML={{__html: '<niner/>'}} />

所以，

var App = React.createClass({
   render: function() {
       return <div dangerouslySetInnerHTML={{__html: '<niner/>'}} />;
   }
});

【讨论】：

谢谢@zackify。我当然不希望，但我很感激你的回应！
这是你唯一能做的。