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 ? 'show' : 'hidden'}没有发生任何事情。我做错什么了吗?

492790 次浏览
小开
最佳答案

花括号在字符串内部，因此它被计算为字符串。他们需要在外面，所以这个应该有用:

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

注意“右拉”后面的空格。您不希望意外地提供类“拉右秀”而不是“拉右秀”。括号也要在这里。

小开

正如其他人评论的那样，一会实用程序是目前在ReactJs中处理条件CSS类名的推荐方法。

在你的例子中，解决方案看起来像:

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

.．.

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

顺便说一句，我建议你尽量避免同时使用show和hidden类，这样代码就会更简单。大多数情况下，您不需要为默认显示的内容设置类。

为了提高性能，你可以查看clsx作为替代方案。

小开

根据@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简短

小开

如果你正在使用一个转译器(如巴别塔或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'}`}>
小开

或者使用npm 一会。它非常简单和有用，特别是对于构造类列表

小开

更优雅的解决方案，更有利于维护和可读性:

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


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


<Element className={classNames.join(' ')}/>
小开
你可以使用ES6数组来代替类名。 答案基于Axel Rauschmayer博士的文章:有条件地在数组和对象字面量中添加条目.

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

你可以使用这 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"
小开

你可以在这里使用字符串字面量

const Angle = ({show}) => {


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


return <i className={angle} />
}
小开

这对你有用

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


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


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

2019:

React有很多实用程序。但是你不需要任何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( ([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>

只为获得灵感

声明helper DOM元素并使用它的原生toggle方法:

(DOMToken​List)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;
}
小开

基于this.props.showBulkActions的值，你可以动态地切换类，如下所示。

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

你可以用这个:

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

我想补充的是，你也可以使用变量内容作为类的一部分

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

上下文是机器人和用户之间的聊天，样式根据发送者而改变，这是浏览器的结果:

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

如果你只需要一个可选类名:

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

当您有多个类要追加时，这非常有用。你可以用一个空格来连接数组中的所有类。

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>
小开

引用@split fire answer，我们可以用模板字面量更新它，这更可读，供参考签出javascript模板文字

<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' : 'hidden'}`}
小开 
<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean)删除“;false”;数组中的值。由于类名必须是字符串，因此其他任何名称都不会包含在新筛选数组中。

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

小开

根据参数(如果存在)返回正确类的函数

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

我成功地使用这个逻辑将正确的颜色应用到我的引导表行。

小开

例如，您可以简单地执行以下操作。

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" : ""}`}
小开

简单地使用这种方法——

<div className={`${this.props.showActions ? 'shown' : 'hidden'}`}>

这样就整洁多了。

小开 
<div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div>

不要忘记在静态类名之后添加一个额外的空格。


提交答案