javascript - change - Reaccione Js aplicando condicionalmente atributos de clase

react router

Question

Quiero mostrar y ocultar condicionalmente este grupo de botones dependiendo de lo que se pasa del componente principal que se ve así:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? ''show'' : ''hidden''}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

Sin embargo, no pasa nada con las {this.props.showBulkActions? ''show'': ''oculto''}. ¿Estoy haciendo algo mal aquí?

Answer 1

2019:

Reaccionar es un lago con muchas utilidades. Pero no necesita ningún paquete npm para eso. simplemente cree en algún lugar los classnames función y classnames cuando lo necesite;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join('' '');
}

o

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'''' ).join('' '');
}

ejemplo

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return ''foo pony''

bonificación solo por inspiración

puede declarar el elemento auxiliar y tomarlo como classList para obtener acceso a DOMToken List y tal vez escribir algo así

const classes = document.createElement(''span'').classList; //DOMToken​List;
function classnames(obj){
 classes.value = '''';
 return Object.entries(obj).reduce( (c, [k,v]) => (c.toggle(k,v),c), classes ).value;

}

Answer 2

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

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

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

...

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

Como nota al margen, te sugiero que intentes evitar usar hidden 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.

Answer 3

En caso de que solo necesite un nombre de clase opcional:

// 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"

Answer 4

Esto funcionaría para ti

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

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

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

Answer 5

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

Answer 6

Las llaves están dentro de la cadena, por lo que se evalúa como una cadena. Deben estar afuera, así que esto debería funcionar:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? ''show'' : ''hidden'')}>

Tenga en cuenta el espacio después de "pull-right". No desea proporcionar accidentalmente la clase "pull-rightshow" en lugar de "pull-right show". También los paréntesis deben estar allí.

Answer 7

Me gustaría agregar que también puedes usar un contenido variable como parte de la clase

<img src="http://imageurl" alt="Avatar" class="img-bot">

El contexto es un chat entre un bot y un usuario, y los estilos cambian dependiendo del remitente, este es el resultado del navegador:

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>
)
}
}
)

Answer 8

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

Answer 9

Puede usar aquí los literales de cadena

const Angle = ({show}) => {

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

   return <i className={angle} />
}

Answer 10

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

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

Answer 11

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

<div ...{...this.props.showBulkActions 
? { className: ''btn-group pull-right show'' } 
: { className: ''btn-group pull-right hidden'' }}>

Answer 12

Puedes usar si un 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> ) } } )

Answer 13

Según el valor de this.props.showBulkActions , puede cambiar de clase dinámicamente de la siguiente manera.

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

Answer 14

Si está utilizando un transpilador (como Babel o Traceur) puede usar las nuevas " cadenas de plantilla " de ES6.

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, representando s-is-shown o s-is-hidden :

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

Answer 15

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('' '')}/>

Answer 16

puedes usar esto:

<div className={"btn-group pull-right" + (this.props.showBulkActions ? '' show'' : '' hidden'')}>