Leí en los documentos de React que las declaraciones de tipo "si" no se pueden usar en el código JSX, debido a la forma en que JSX se convierte en javascript, no funciona como cabría esperar.

¿Pero hay alguna razón por la cual implementar un componente "si" es una mala idea? Parece que funciona bien en mis pruebas iniciales, y me hace preguntarme por qué esto no se hace con más frecuencia.

Parte de mi intención es permitir que el desarrollo de la reacción sea lo más posible, basado en el marcado, con el menor javascript posible. Este enfoque, para mí, se siente más como un enfoque "basado en datos".

Usted puedeéchale un vistazo aquí en 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>

Al ejecutar los resultados anteriores en:

Mostrando artículo verdadero