Tag elemento HTML personalizzato in React JSX

Question

Stiamo utilizzando una libreria di componenti che utilizza elementi personalizzati. Questo ci impone di utilizzare tag HTML personalizzati all'interno del nostro JSX. Per un esempio molto semplice:

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

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

In questo caso particolare, ho solo bisogno Reagire ad emettere un tag niner senza di essa cercando di fare niente di speciale con esso. Non ho intenzionalmente alcun componente React Niner.

Secondo JSX in depth,

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

che mi ha portato a credere che ReactJS sarebbe solo trattare <niner/> come un tag HTML regolare e non soffocare su di esso. Quando eseguo il codice di cui sopra, tuttavia, ottengo il seguente errore:

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 

Ho bisogno di fare una sorta di magia per ottenere questo lavoro? Grazie.

Answer 1

Non è necessario fare nulla. Ho appena provato questo

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


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

Quindi non avresti bisogno di alcuna magia per farlo funzionare. Forse è un problema con il tuo modo di raggruppare?

Speranza che aiuta :)

Answer 2

dovrete fare qualcosa di simile

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

così,

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