Я хочу условно показать и скрыть эту группу кнопок в зависимости от того, что передается из родительского компонента, который выглядит следующим образом:
<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? 'показать скрытое'}. Я что-то здесь не так делаю?
Ответы:
Фигурные скобки находятся внутри строки, поэтому она оценивается как строка. Они должны быть снаружи, поэтому это должно работать:
Обратите внимание на пробел после «тянуть-вправо». Вы не хотите случайно предоставить класс «pull-righthow» вместо «pull-right show». Также скобки должны быть там.
источник
classnames
может быть нецелесообразно. Если вы находитесь в своейrender
функции и у вас естьmap
, вы можете знать, хотите ли вы добавить класс во время его рендеринга, поэтому этот ответ весьма полезен для этого.this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')
. Не элегантно, но это работает.Как прокомментировали другие, в настоящее время рекомендуется использовать утилиту classnames для обработки условных имен классов CSS в ReactJ.
В вашем случае решение будет выглядеть так:
...
В качестве примечания, я бы посоветовал вам избегать использования обоих
show
иhidden
классов, чтобы код мог быть проще. Скорее всего, вам не нужно устанавливать класс, чтобы что-то отображалось по умолчанию.источник
classNames
в данный момент?Если вы используете транспортер (например, Babel или Traceur), вы можете использовать новые ES6 « шаблоны строк ».
Вот ответ @ spitfire109, измененный соответственно:
Этот подход позволяет вам делать такие аккуратные вещи, рендеринг
s-is-shown
илиs-is-hidden
:источник
s-is-shown
илиs-is-hidden
в базе кода, он не найдет этот код.Вы можете использовать здесь строковые литералы
источник
Опираясь на хороший ответ @ spitfire109, можно сделать что-то вроде этого:
а затем внутри функции рендеринга:
держит JSX коротким
источник
Или используйте имена классов npm . Это очень просто и полезно, особенно для составления списка классов
источник
На случай, если вам понадобится только одно необязательное имя класса:
источник
false
класс, когда условие не выполнено.Вы можете использовать массивы ES6 вместо имен классов. Ответ основан на статье доктора Акселя Раушмайера: Условное добавление записей в массив и массивы объектов .
источник
2019:
Реакция на озеро много полезных. Но вам не нужен
npm
пакет для этого. просто создайте где-нибудь функциюclassnames
и вызывайте ее, когда вам нужно;или
пример
Просто для вдохновения
объявить вспомогательный элемент и использовать его
toggle
метод(DOMTokenList)classList.toggle(class,condition)
пример:
источник
Более элегантное решение, которое лучше для обслуживания и удобочитаемости:
источник
Вы можете использовать это:
источник
Это будет работать для вас
источник
Вы можете использовать этот пакет npm. Он обрабатывает все и имеет параметры для статических и динамических классов на основе переменной или функции.
источник
В зависимости от значения
this.props.showBulkActions
вы можете динамически переключать классы следующим образом.источник
Я хотел бы добавить, что вы также можете использовать переменное содержимое как часть класса
Контекст - это чат между ботом и пользователем, и стили меняются в зависимости от отправителя, это результат браузера:
источник
Это полезно, когда вам нужно добавить несколько классов. Вы можете объединить все классы в массиве с пробелом.
источник
Заменить:
с участием:
источник
Ссылка на @split огнь ответ, мы можем обновить его шаблон литералы, который является более удобным для чтения, для справки Checkout Javascript шаблона буквальных
источник
Я нашел это, которое объясняет, как сделать это с троичной и с библиотекой классов
источник