Реагировать Js, условно применяя атрибуты класса

Ответ 1

фигурные скобки внутри строки, поэтому она оценивается как строка. Они должны быть снаружи, поэтому это должно работать:

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

Обратите внимание на пробел после "pull-right". Вы не хотите случайно предоставлять класс "pull-rightshow" вместо "pull-right show". Также должны быть круглые скобки.

Ответ 2

Как отмечали другие, classnames утилита - это рекомендуемый в настоящее время подход для обработки условных имен классов CSS в ReactJs.

В вашем случае решение будет выглядеть так:

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

...

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

В качестве побочного примечания я предлагаю вам попытаться избежать использования классов show и hidden, поэтому код может быть проще. Скорее всего, вам не нужно устанавливать класс для показа чего-либо по умолчанию.

Ответ 3

Если вы используете транспилер (например, Babel или Traceur), вы можете использовать новый ES6 " строки шаблона".

Вот ответ @spitfire109, измененный соответственно:

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

Этот подход позволяет делать такие аккуратные вещи, предоставляя либо s-is-shown, либо s-is-hidden:

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

Ответ 4

Вы можете использовать здесь строковые литералы

const Angle = ({show}) => {

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

   return <i className={angle} />
}

Ответ 5

Расходуя на @spitfire109 прекрасный ответ, можно сделать что-то вроде этого:

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

  return names.join(' ');
}

а затем внутри функции рендеринга:

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

хранит jsx short

Ответ 6

Или используйте npm classnames. Это очень легко и полезно, особенно для построения списка классов

Ответ 7

На случай, если вам понадобится только одно необязательное имя класса:

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

Ответ 8

Вы можете использовать массивы ES6 вместо классов. Ответ основан на статье доктора Акселя Раушмайера: Условно добавление записей внутри массивов и объектных литералов.

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

Ответ 9

Более элегантное решение, которое лучше для обслуживания и удобочитаемости:

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

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

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

Ответ 10

2019:

Реакция на озеро много полезных. Но для этого вам не нужен пакет npm. просто создайте где-нибудь имя classnames функции и вызывайте его, когда вам нужно;

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

или же

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

пример

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

бонус только за вдохновение

вы можете объявить вспомогательный элемент и взять его classList для получения доступа к DOMToken List и, возможно, написать что-то подобное

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;

}

Ответ 11

Вы можете использовать это:

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

Ответ 12

Это будет работать для вас

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

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

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

Ответ 13

Вы можете использовать этот пакет npm. Он обрабатывает все и имеет параметры для статических и динамических классов, основанных на переменной или функции.

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

Ответ 14

На основании значения this.props.showBulkActions вы можете динамически переключать классы следующим образом.

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

Ответ 15

Я хотел бы добавить, что вы также можете использовать переменное содержимое как часть класса

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

Контекст представляет собой чат между ботом и пользователем, и стили меняются в зависимости от отправителя, это результат браузера:

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

Ответ 16

Вы можете использовать, если концепция такая

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