web-dev-qa-db-ja.com

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

javascriptcsstwitter-bootstrap-3reactjsclass-attributes
227
apexdodge

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

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

"pull-right"の後のスペースに注意してください。あなたは誤って "pull-right show"の代わりに "pull-rightshow"クラスを提供したくないでしょう。括弧もそこにある必要があります。

420
spitfire109

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

あなたの場合には、解決策は以下のようになります。

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

...

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

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

65
Diego V

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

ここで使うことができます文字列リテラル

const Angle = ({show}) => {

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

   return <i className={angle} />
}
9
Musa

またはnpm クラス名 を使用してください。クラスのリストを作成するのに特に簡単で便利です。

6
Pencilcheck

@ spitfire109の良い答えを見て、このようなことができるでしょう。

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

  return names.join(' ');
}

そしてrender関数の中で：

<div className={this.rootClassNames()}></div>

jsxを短く保つ

6
flaky

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

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

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

<div className={"btn-group pull-right " + (this.props.showBulkActions && 'show')}>
2
chibis0v

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'
``
2
pery mimon

より洗練されたソリューション、これはメンテナンスと読みやすさに優れています。

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

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

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

これはあなたのために働くだろう

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

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

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

クラスの一部として 変数の内容 を使用することもできます。

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

コンテキストはボットとユーザー間のチャットであ​​り、送信者によってスタイルが変わります。これがブラウザの結果です。

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

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"
0
Tushar Sharma

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

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

this.props.showBulkActionsの値に基づいて、次のようにクラスを動的に切り替えることができます。

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