我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示：
<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 ? 'show' : 'hidden'}花括号位于字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该可行：
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
注意“向右拉”后面的空格。您不想意外提供类“pull-rightshow”而不是“pull-right show”。括号也需要在那里。
正如其他人评论的那样，classnames实用程序是当前推荐的在 ReactJs 中处理条件 CSS 类名的方法。
在您的情况下，解决方案将如下所示：
var btnGroupClasses = classNames(
'btn-group',
'pull-right',
{
'show': this.props.showBulkActions,
'hidden': !this.props.showBulkActions
}
);
...
<div className={btnGroupClasses}>...</div>
顺便说一句，我建议您尽量避免同时使用
showhidden2021 年附录： 为了提高性能，您可以查看 clsx 作为替代方案。
您可以简单地执行以下操作。
let classNameDependsOnCondtion = i18n.language == 'en' ? "classname" : "";
className={`flex flex-col lg:flex-row list-none ${classNameDependsOnCondtion }`}
或
className={`flex flex-col lg:flex-row list-none ${i18n.language == 'en' ? "classname" : ""}`}
您可以在此处使用字符串文字
const Angle = ({show}) => {
const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;
return <i className={angle} />
}
更换：
<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">`
与：
<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}
如果您只需要一个可选的类名：
<div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}>
或者使用 npm classnames。它非常简单且有用，特别是对于构建类列表
扩展@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 简短
您可以使用 ES6 数组代替类名。 答案基于 Axel Rauschmayer 博士的文章：有条件地在数组和对象文字中添加条目。
<div className={[
"classAlwaysPresent",
...Array.from(condition && ["classIfTrue"])
].join(" ")} />
2019：
React 拥有很多实用工具。但你不需要任何
npmclassnamesfunction classnames(obj){
return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}
或
function classnames(obj){
return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' ');
}
示例
stateClass= {
foo:true,
bar:false,
pony:2
}
classnames(stateClass) // return 'foo pony'
<div className="foo bar {classnames(stateClass)}"> some content </div>
声明辅助 DOM 元素并使用它的原生
toggle(DOMTokenList)classList.toggle(class,condition)示例：
const classes = document.createElement('span').classList;
function classstate(obj){
for( let n in obj) classes.toggle(n,obj[n]);
return classes;
}
<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />
.filter(Boolean)console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') )
console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )const cx = (...list) => list.filter(Boolean).join(' ')
// usage:
<div className={cx('foo', condition && 'bar')} />
var cx = (...list) => list.filter(Boolean).join(' ')
console.log( cx('foo', 1 && 'bar', 1 && 'baz') )
console.log( cx('foo', 0 && 'bar', 1 && 'baz') )
console.log( cx('foo', 0 && 'bar', 0 && 'baz') )更优雅的解决方案，更利于维护和可读性：
const classNames = ['js-btn-connect'];
if (isSelected) { classNames.push('is-selected'); }
<Element className={classNames.join(' ')}/>
就用这个方法--
<div className={`${this.props.showActions ? 'shown' : 'hidden'}`}>
这更加整洁干净。
你可以使用这个：
<div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}>
当您要附加多个类时，这非常有用。您可以使用空格将所有类连接到数组中。
const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>
我尝试定制我的答案，以在帖子中包含所有可能的最佳解决方案
有很多不同的方法可以完成此任务。
<div className={`... ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
...
</div>
var btnClass = classNames(
...
{
'show': this.props.showBulkActions,
'hidden': !this.props.showBulkActions
}
);
let dependentClass = this.props.showBulkActions ? 'show' : 'hidden';
className={`... ${dependentClass }`}
<div className={clsx('...',`${this.props.showBulkActions ? 'show' : 'hidden'}`)}>
...
</div>
这对你有用
var TopicNav = React.createClass({
render: function() {
let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;
return (
...
<div className={_myClasses}>
...
</div>
);
}
});
参考@split fire的答案，我们可以用模板文字来更新，这样可读性更强，供参考查看javascript模板文字
<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
您可以使用this 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"
根据
this.props.showBulkActions<div ...{...this.props.showBulkActions
? { className: 'btn-group pull-right show' }
: { className: 'btn-group pull-right hidden' }}>
我想补充一点，您还可以使用可变内容作为课程的一部分
<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />
上下文是机器人和用户之间的聊天，样式根据发送者的不同而变化，这是浏览器结果：
<img src="http://imageurl" alt="Avatar" class="img-bot">
根据参数（如果存在）返回正确类的函数
getClass(param){
let podClass = 'classA'
switch(param.toLowerCase()){
case 'B':
podClass = 'classB'
break;
case 'C':
podClass = 'classC'
break;
}
return podClass
}
现在只需从要应用相应类的 div 调用此函数即可。
<div className={anyOtherClass + this.getClass(param)}
我成功地使用此逻辑将正确的颜色应用到我的引导表行。
<div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div>
不要忘记在静态类名称后面添加额外的空格。