¿Cómo incluyo opcionalmente un elemento en JSX? Aquí hay un ejemplo usando un banner que debería estar en el componente si se ha pasado. Lo que quiero evitar es tener que duplicar las etiquetas HTML en la instrucción if.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Simplemente deje el banner como indefinido y no se incluye.

¿Qué hay de esto? Definamos un Ifcomponente de ayuda simple .

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

Y úsalo de esta manera:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

ACTUALIZACIÓN: a medida que mi respuesta se está volviendo popular, me siento obligado a advertirle sobre el mayor peligro relacionado con esta solución. Como se señaló en otra respuesta, el código dentro del <If />componente se ejecuta siempre independientemente de si la condición es verdadera o falsa. Por lo tanto, el siguiente ejemplo fallará en caso de que bannersea null(tenga en cuenta el acceso a la propiedad en la segunda línea):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

Tienes que tener cuidado cuando lo usas. Sugiero leer otras respuestas para enfoques alternativos (más seguros).

ACTUALIZACIÓN 2: Mirando hacia atrás, este enfoque no solo es peligroso sino también desesperadamente engorroso. Es un ejemplo típico de cuando un desarrollador (yo) intenta transferir patrones y enfoques que conoce de un área a otra, pero realmente no funciona (en este caso, otros lenguajes de plantilla).

Si necesita un elemento condicional, hágalo así:

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Si también necesita la rama else, solo use un operador ternario:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

Es mucho más corto, más elegante y seguro. Lo uso todo el tiempo. La única desventaja es que no se puede else iframificar tan fácilmente, pero eso no suele ser tan común.

De todos modos, esto es posible gracias a cómo funcionan los operadores lógicos en JavaScript. Los operadores lógicos incluso permiten pequeños trucos como este:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

Personalmente, realmente creo que las expresiones ternarias que se muestran en ( JSX In Depth ) son la forma más natural que se ajusta a los estándares ReactJs.

Ver el siguiente ejemplo. Es un poco desordenado a primera vista, pero funciona bastante bien.

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) : 
  null} 
  <div id="other-content">
    blah blah blah...
  </div>
</div>

También puedes escribirlo como

{ this.state.banner && <div>{...}</div> }

Si state.banneres nullo undefined, se omite el lado derecho de la condición.

El Ifcomponente de estilo es peligroso porque el bloque de código siempre se ejecuta independientemente de la condición. Por ejemplo, esto causaría una excepción nula si banneres null:

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Otra opción es usar una función en línea (especialmente útil con sentencias else):

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Otra opción de los problemas de reacción :

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

&& + código-estilo + componentes pequeños

Esta simple sintaxis de prueba + convención de estilo de código + pequeños componentes enfocados es para mí la opción más legible que existe. Solo necesita tener especial cuidado con los valores falsos como false, 0o "".

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

hacer notación

La sintaxis de notación do7 stage-0 de ES7 también es muy buena y definitivamente la usaré cuando mi IDE lo admita correctamente:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

Más detalles aquí: ReactJs - Crear un componente "If" ... ¿una buena idea?

Simple, crea una función.

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Este es un patrón que yo personalmente sigo todo el tiempo. Hace que el código sea realmente limpio y fácil de entender. Además, le permite refactorizar Banneren su propio componente si se vuelve demasiado grande (o se reutiliza en otros lugares).

La dosintaxis experimental de ES7 lo hace fácil. Si está utilizando Babel, habilite la es7.doExpressionsfunción y luego:

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

Ver http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions

Como ya se mencionó en las respuestas, JSX le presenta dos opciones

• Operador ternario

  { this.state.price ? <div>{this.state.price}</div> : null }

• Conjunción lógica

  { this.state.price && <div>{this.state.price}</div> }

Sin embargo, esos no funcionan price == 0 .

JSX representará la rama falsa en el primer caso y en caso de conjunción lógica, no se representará nada. Si la propiedad puede ser 0, solo use sentencias if fuera de su JSX.

Este componente funciona cuando tiene más de un elemento dentro de la rama "if":

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

Uso:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

Ps alguien piensa que estos componentes no son buenos para la lectura de código. Pero en mi opinión, HTML con JavaScript es peor

La mayoría de los ejemplos son con una línea de "html" que se representa condicionalmente. Esto parece legible para mí cuando tengo varias líneas que deben representarse condicionalmente.

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

El primer ejemplo es bueno porque en lugar de nullque podamos renderizar condicionalmente algún otro contenido como{this.props.showContent ? content : otherContent}

Pero si solo necesita mostrar / ocultar contenido, esto es aún mejor ya que se ignoran los valores booleanos, nulos e indefinidos

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

Hay otra solución, si componente para React :

var Node = require('react-if-comp');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Utilizo un acceso directo más explícito: una expresión de función invocada inmediatamente (IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

Hice https://www.npmjs.com/package/jsx-control-statements para que sea un poco más fácil, básicamente le permite definir <If>condicionales como etiquetas y luego las compila en ifs ternarios para que el código dentro del <If>único se obtenga ejecutado si la condición es verdadera.

También hay una versión realmente limpia de una línea ... {this.props.product.title || "Sin título" }

Es decir:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

Hice https://github.com/ajwhite/render-if recientemente para representar elementos de forma segura solo si el predicado pasa .

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

o

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

Puede incluir elementos condicionalmente utilizando el operador ternario de esta manera:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

Puede usar una función y devolver el componente y mantener delgada la función de renderizado

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

Aquí está mi enfoque usando ES6.

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById('app'));

Demostración: http://jsfiddle.net/kb3gN/16688/

Estoy usando un código como:

{opened && <SomeElement />}

Eso rendirá SomeElementsolo si openedes cierto. Funciona debido a la forma en que JavaScript resuelve las condiciones lógicas:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

Como Reactignoraré false, considero que es una muy buena forma de renderizar condicionalmente algunos elementos.

Tal vez ayude a alguien que se encuentre con la pregunta: todas las representaciones condicionales en React Es un artículo sobre todas las diferentes opciones para la representación condicional en React.

Conclusiones clave sobre cuándo usar qué representación condicional:

** if-else

• es la representación condicional más básica
• principiante amigable
• use if para darse de baja anticipadamente de un método de renderizado devolviendo nulo

** operador ternario

• úselo sobre una declaración if-else
• es más conciso que si no

** operador lógico &&

• úselo cuando un lado de la operación ternaria devuelva nulo

** caja de interruptor

• verboso
• solo se puede alinear con la función de invocación automática
• evítalo, usa enumeraciones en su lugar

** enumeraciones

• perfecto para mapear diferentes estados
• perfecto para mapear más de una condición

** representaciones condicionales anidadas / multinivel

• evitarlos por el bien de la legibilidad
• dividir componentes en componentes más livianos con su propia representación condicional simple
• usar HOC

** HOC

• úsalos para proteger la representación condicional
• los componentes pueden enfocarse en su propósito principal

** componentes de plantillas externas

• evítalos y siéntete cómodo con JSX y JavaScript

Con ES6 puedes hacerlo con una simple línea

const If = ({children, show}) => show ? children : null

"show" es un booleano y usas esta clase por

<If show={true}> Will show </If>
<If show={false}> WON'T show </div> </If>

No creo que esto haya sido mencionado. Esta es como su propia respuesta, pero creo que es aún más simple. Siempre puede devolver cadenas de las expresiones y puede anidar jsx dentro de las expresiones, por lo que esto permite una expresión en línea fácil de leer.

render: function () {
    return (
        <div id="page">
            {this.state.banner ? <div id="banner">{this.state.banner}</div> : ''}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Hello = React.createClass({
  render: function() {
    return (
      <div id="page">
        {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''}
        <div id="other-content">
          blah blah blah...
        </div>
      </div>
    );   
  }
});

var element = <div><Hello /><Hello banner="banner"/></div>;
React.render(element, document.body);

}()</script>

Me gusta lo explícito de las expresiones de función invocadas inmediatamente ( IIFE) y if-elseover render callbacksand ternary operators.

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Solo necesita familiarizarse con la IIFEsintaxis, {expression}es la sintaxis React habitual, en su interior solo considere que está escribiendo una función que se invoca a sí misma.

function() {

}()

que necesitan ser envueltos dentro de parens

(function() {

}())

También hay una técnica que utiliza accesorios de renderizado para renderizar condicionalmente un componente. Su beneficio es que el render no se evaluaría hasta que se cumpla la condición, lo que no genera preocupaciones por valores nulos e indefinidos .

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

Cuando tenga que representar solo algo si se cumple la condición aprobada, puede usar la sintaxis:

{ condition && what_to_render }

El código de esta manera se vería así:

render() {
    const { banner } = this.state;
    return (
        <div id="page">
            { banner && <div id="banner">{banner}</div> }
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Por supuesto, hay otras formas válidas de hacer esto, todo depende de las preferencias y la ocasión. ¡Puedes aprender más formas sobre cómo hacer renderizado condicional en React en este artículo si estás interesado!

Solo para agregar otra opción: si le gusta / tolera coffee-script, puede usar coffee-react para escribir su JSX, en cuyo caso las declaraciones if / else son utilizables, ya que son expresiones en coffee-script y no declaraciones:

render: ->
  <div className="container">
    {
      if something
        <h2>Coffeescript is magic!</h2>
      else
        <h2>Coffeescript sucks!</h2>
    }
  </div>  

Solo para extender la respuesta de @Jack Allan con referencias a documentos.

La documentación básica de React (inicio rápido) sugiere null en tal caso. Sin embargo, los booleanos, nulos e indefinidos también se ignoran, como se menciona en la guía avanzada.