11

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

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

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

在这种特殊情况下，我只需要 React 输出一个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

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

4

2 回答 2

3

你必须做类似的事情

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

所以，

var App = React.createClass({
   render: function() {
       return <div dangerouslySetInnerHTML={{__html: '<niner/>'}} />;
   }
});
于 2014-12-01T19:10:08.873 回答
3

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

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


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

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

希望能帮助到你 ：）

于 2015-09-24T10:40:38.193 回答