クラス属性を条件付きで適用する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？'表示'： '非表示'}。ここで何か悪いことをしていますか？

中括弧は文字列の中にあるため、文字列として評価されています。彼らは外にいる必要があるので、これはうまくいくはずです：

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

「pull-right」の後のスペースに注意してください。「pull-right show」の代わりに「pull-rightshow」クラスを誤って提供したくない場合。また、括弧が必要です。

他の人がコメントしたように、classnamesユーティリティは、ReactJで条件付きCSSクラス名を処理するために現在推奨されているアプローチです。

あなたの場合、解決策は次のようになります：

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

...

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

補足として、showとhiddenクラスの両方を使用しないようにすることをお勧めします。これにより、コードがより簡単になる可能性があります。ほとんどの場合、デフォルトで表示されるものに対してクラスを設定する必要はありません。

トランスパイラー（Babelや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'}`}>

ここでは文字列リテラルを使用できます

const Angle = ({show}) => {

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

   return <i className={angle} />
}

@ 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を短く保つ

または、npm classnamesを使用します。特にクラスのリストを作成するのにとても簡単で便利です

オプションのクラス名が1つだけ必要な場合：

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

クラス名の代わりにES6配列を使用できます。答えは、Axel Rauschmayer博士の記事に基づいています。条件付きで配列内にエントリを追加します。

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

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( ([k,v]) => v?k:'' ).join(' ');
}

例

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

インスピレーションのために

ヘルパー要素を宣言し、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; 
}

メンテナンスと可読性に優れたよりエレガントなソリューション：

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

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

<Element className={classNames.join(' ')}/>

あなたはこれを使うことができます：

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

これはあなたのために働くでしょう

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

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

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

この 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">

追加するクラスが複数ある場合に便利です。スペースで配列内のすべてのクラスを結合できます。

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

交換：

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

と：

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

@split fire回答への参照、より読みやすいテンプレートリテラルで更新できます。参照用Checkout javascriptテンプレートリテラル

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

私が見つかりました。これを三成分とし、クラス名ライブラリでそれを行う方法を説明しています