Podes ler sobre isto na documentação do React, mas basicamente há 4 tipos diferentes.
Fiz um jsFiddle de exemplo aqui: https://jsfiddle.net/mk50r5qt/
O código é:
var Span = React.createClass({
render: function() {
return (
<span style={{color: this.props.color}}>
{this.props.text}
</span>
);
}
});
var Hello = React.createClass({
render: function() {
return (<div>
<Span {...this.props} text={'Hello'} />
{/* comentário entre componentes */}
<Span {...this.props} text={' World!'} />
</div>);
}
});
ReactDOM.render(
// comentário ao estilo JavaScript
< Hello /* comentário dentro do componente */ name="World" /*
comentários de multiplas linhas funcionam também!
*/ color={'blue'}
/> ,
document.getElementById('container')
);
#1 - comentários entre componentes:
dentro de JSX, entre componentes a sintaxe é {/* texto aqui */}
. A razão das chavetas {}
é para interpretar como JavaScript e aí sabemos como comentar.
#2 - comentários fora e antes de componentes:
render: function() {
return (
// comentário antes do componente contentor...
<div>
#3 - comentários dentro das tags de componente na mesma linha:
<Hello /* comentário dentro do componente */ name="World" />
#4 - comentários dentro das tags de componente em linhas multiplas:
<Hello name="World"
/*
comentários de multiplas linhas funcionam também!
*/
color={'blue'}
/>
http://chenglou.github.io/react/docs/jsx-in-depth.html#comments