我想有条件地显示和隐藏这个按钮组,这取决于从父组件传入的内容,看起来像这样:

    <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'}。我做错什么了吗?


当前回答

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

const Angle = ({show}) => {

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

   return <i className={angle} />
}

其他回答

如果你正在使用一个转译器(如Babel或Traceur),你可以使用新的ES6“模板字符串”。

以下是@spitfire109的答案,经过了相应的修改:

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

这个方法允许你做一些简洁的事情,呈现s-is-show或s-is-hidden:

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

参考@split fire answer,我们可以用模板文字来更新它,这样更有可读性,供参考Checkout javascript模板文字

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean)从数组中删除“错误”值。由于类名必须是字符串,因此任何字符串以外的内容都不会包含在新的筛选数组中。

console.log(['foo', true && 'bar'].filter(Boolean)。Join (' ')) console.log(['foo', false && 'bar'].filter(布尔值)。Join (' '))

上面写为函数:

const cx = (...list) => list.filter(Boolean).join(' ')

// usage:
<div className={cx('foo', condition && 'bar')} />

var cx = (.. list) => list.filter(布尔兰)。join (' ') 1、log (ex(’foo’&&游戏机’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,0 &&’baz’))

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

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

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

2019:

React有很多实用程序。但你不需要任何npm包。只需在某个地方创建函数类名并在需要时调用它;

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

or

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元素并使用它的本地切换方法:

(DOMToken列表)classList.toggle(类,条件)

例子:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}