在React JSX中使用自定义HTML元素标签

Question

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

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

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

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

在这种情况下，我只需要React输出一个没有任何特殊处理的niner标签。我故意没有niner React组件。

根据深入理解JSX，

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

我需要进行某种巫术才能使它工作吗？谢谢。

- Aaronius

Answer 1

您不需要做任何事情。我只是尝试了一下。

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


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

所以你不需要任何神奇的技巧来使它工作。也许这是你打包的方式有问题？

希望能帮到你 :)

- Ramon Gebben

---

谢谢Ramon。他们最近添加了对此的支持，因此不再需要巫术（正如您所指出的那样）。 - Aaronius

这个东西总是安全的使用吗？ - Abraham

Answer 2

您需要做的类似于：

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

那么，

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

- zackify

---

感谢@zackify。我希望不是这样，但我很感激你的回复！ - Aaronius

这是你唯一能做的事情。 - zackify