React JSX中的自定義HTML元素標記

我們正在使用使用自定義元素的組件庫。這要求我們在我們的JSX中使用自定義HTML標籤。對於一個非常簡單的例子：React JSX中的自定義HTML元素標記

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

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

在這種特殊情況下，我只需要應對輸出niner標籤沒有它試圖對它做任何事太特殊了。我故意沒有niner React組件。

據JSX in depth，

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

這使我相信，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

我需要做某種巫術才能使其工作嗎？謝謝。

來源

2014-12-01 Aaronius

你不需要做任何事情。我只是試過這個

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


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

所以不，你不會需要任何魔法讓它工作。也許這是你捆綁的方式的問題？

希望它有幫助:)

來源

2015-09-24 10:40:38

謝謝拉蒙。他們最近增加了對此的支持，所以不再需要魔術（正如你所指出的）。 – Aaronius 2015-09-24 15:49:29

你必須做一些像

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

所以，

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

來源

2014-12-01 19:10:08 zackify

謝謝@zackify。我當然不希望，但我很欣賞這種迴應！ – Aaronius 2014-12-01 20:43:09

這是你唯一能做的事情。 – zackify 2014-12-01 22:04:34

React JSX中的自定義HTML元素標記

回答

相關問題