it-swarm.com.ru

React Js условно применяя атрибуты класса

Я хочу условно показать и скрыть эту группу кнопок в зависимости от того, что передается из родительского компонента, который выглядит следующим образом:

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

Однако ничего не происходит с {this.props.showBulkActions? 'показать скрытое'}. Я что-то здесь не так делаю?

239
apexdodge

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

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

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

395
spitfire109

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

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

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

...

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

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

62
Diego V

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

Вот ответ @ 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'}`}>
48
Bertrand

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

const Angle = ({show}) => {

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

   return <i className={angle} />
}
7
Musa

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

6
Pencilcheck

Опираясь на хороший ответ @ 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 коротким

6
flaky

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

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

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

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

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

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

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

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

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

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

0
Mano

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

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

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

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

Вы можете использовать этот 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"
0
Tushar Sharma

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

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

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

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

2019:

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

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

пример

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