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

Custom HTML Element Tag within React JSX

本文关键字：元素 HTML 自定义 JSX React      更新时间：2023-09-26

我们正在使用使用自定义元素的组件库。这要求我们在 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

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

你必须

做类似的事情 

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

所以

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

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

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

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

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

希望对:)有所帮助

相关文章：