Question

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

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

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

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

根据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

我需要做一些巫术才能让它发挥作用吗？感谢。

Answer 1

你必须做类似的事情

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

所以，

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

Answer 2

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

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


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

所以不，你不需要任何魔法来让它工作。也许这是捆绑方式的问题？

希望有所帮助：）

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

2 个答案: