Eu li nos documentos do React que as instruções do tipo "if" não podem ser usadas no código JSX, devido à maneira como o JSX processa em javascript, ele não funciona como seria de esperar.

Mas há alguma razão para implementar um componente "se" ser uma má idéia? Parece funcionar bem nos meus testes iniciais e me faz pensar por que isso não é feito com mais frequência?

Parte da minha intenção é permitir que o desenvolvimento da reação seja o mais possível, baseado em marcação - com o mínimo de javascript possível. Essa abordagem, para mim, parece mais uma abordagem "orientada a dados".

Você podeconfira aqui no JS Fiddle

<script type='text/javascript' src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script>
<script type='text/javascript' src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
    
var If = React.createClass({
  displayName: 'If',

  render: function()
  {
    if (this.props.condition)
      return <span>{this.props.children}</span>
    return null;
  }
});

var Main = React.createClass({
    render: function() {
        return (
           <div>
             <If condition={false}>
                <div>Never showing false item</div>
             </If>
             <If condition={true}>
                <div>Showing true item</div>
             </If>
          </div>
        );
    }
});

React.renderComponent(<Main/>, document.body);
</script>

A execução dos resultados acima em:

Mostrando item verdadeiro