React Js aplicando condicionalmente atributos de clase

Como otros han comentado, la utilidad classnames es el enfoque recomendado actualmente para manejar nombres de clases CSS condicionales en ReactJS.

En su caso, la solución se verá como:

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

Como nota al margen, le sugeriría que intente evitar el uso de las clases show y hidden, para que el código sea más simple. Lo más probable es que no necesite establecer una clase para que algo se muestre de forma predeterminada.

Si está utilizando un transpiler (como Babel o Traceur) puede usar la nueva ES6 "template strings".

Aquí está la respuesta de @spitfire109, modificada en consecuencia:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>

Este enfoque le permite hacer cosas ordenadas como esa, renderizando s-is-shown o s-is-hidden:

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

Gastando en la buena respuesta de @spitfire109, uno podría hacer algo como esto:

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

Y luego dentro de la función render:

<div className={this.rootClassNames()}></div>

Mantiene el jsx corto

O utilice npm classnames. Es muy fácil y útil especialmente para construir la lista de clases

Puede usar matrices ES6 en lugar de nombres de clase. La respuesta se basa en el artículo del Dr. Axel Rauschmayer: Añadiendo condicionalmente entradas dentro de literales de matriz y objeto.

<div className={[
                 "classAlwaysPresent", 
                 ...Array.from(condition && ["classIfTrue"])
                ].join(" ")} />

Puede usar aquí Literales de cadena

 const Angle = ({show}) => {

 const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

 return <i className={angle} />
}

Puede usar este paquete npm. Maneja todo y tiene opciones para clases estáticas y dinámicas basadas en una variable o una función.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"

Solución más elegante, que es mejor para el mantenimiento y la legibilidad:

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

Esto funcionaría para usted

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

Se puede utilizar si concepto como este

var Count=React.createClass({
getInitialState: function()
{
var state={counter:1};

setInterval(function(){
this.setState(
{counter:this.state.counter+(this.state.counter==1000?9999999999:1)})
}.bind(this),1);
return state;
},

render:function(){
return(
<div>
Counter<br/>
{this.state.counter}
</div>
)
}
}
)