Question

我想有条件地显示和隐藏此按钮组，具体取决于从父组件传入的内容，如下所示：

<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？＆＃39;秀＆＃39; ：＆＃39;隐藏＆＃39;}。我在这里做错了吗？

Answer 1

大括号在字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该有效：

merge(expand.grid(startTime=unique(df1$startTime),
      Hour= min(df1$Hour):max(df1$Hour)), df1, all.x=TRUE)

注意“右拉”之后的空格。您不希望意外地提供“pull-rightshow”类而不是“pull-right show”。括号也需要在那里。

Answer 2

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

在您的情况下，解决方案将如下所示：

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

...

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

作为旁注，我建议您尽量避免使用show和hidden类，因此代码可能更简单。最有可能的是，您不需要为默认显示的内容设置类。

Answer 3

如果您使用的是转发器（例如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'}`}>

Answer 4

您可以在此处使用字符串文字

const Angle = ({show}) => {

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

   return <i className={angle} />
}

Answer 5

如果您只需要一个可选的类名：

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

Answer 6

根据@ spitfire109的答案，可以做到这样的事情：

return elem0 === elem1;

然后在渲染函数中：

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

  return names.join(' ');
}

保持jsx短

Answer 7

或使用npm classnames。它非常简单有用，尤其适用于构建类列表

Answer 8

替换：

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

具有：

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

Answer 9

您可以使用ES6数组而不是类名。答案基于Axel Rauschmayer博士的文章：Conditionally adding entries inside Array and object literals。

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

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

奖金只是为了启发

您可以声明helper元素并将其带为classList以访问DOMToken List并可能编写类似的内容

const classes = document.createElement('span').classList; //DOMTokenList;
function classnames(obj){
 classes.value = '';
 return Object.entries(obj).reduce( (c, [k,v]) => (c.toggle(k,v),c), classes ).value;

}

Answer 11

这将为您工作

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

Answer 12

您可以使用此：

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

Answer 13

更优雅的解决方案，更好的维护和可读性：

Top Bar

Answer 14

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean)从数组中删除“假”值。由于类名必须为 strings ，因此 new 过滤数组中将不包含任何其他内容。

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

Answer 15

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

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

Answer 16

当您要添加多个类时，这很有用。您可以使用空格将数组中的所有类连接在一起。

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

Answer 17

您可以使用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"

Answer 18

基于this.props.showBulkActions的值，您可以按以下方式动态切换类。

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

Answer 19

我想补充一点，您也可以将可变内容用作课程的一部分

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

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

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

Answer 20

参考@split fire答案，我们可以使用更具可读性的模板文字对其进行更新，以供参考Checkout javascript template literal

from datetime import datetime
print(datetime.now().strftime('%Y-%m-%d %H:%M:%S'))

Answer 21

根据参数（如果存在）返回正确的类的函数

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

我成功地使用了这种逻辑，将正确的颜色应用于引导表行。

Answer 22

你可以使用if这样的概念

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

React Js有条件地应用类属性

22 个答案:

奖金只是为了启发

上面写为函数：