web-dev-qa-db-ja.com

Reactテンプレート文字列と&&演算子を使用した条件付きクラス名

条件付きクラス名をReactコンポーネントに適用することに関して、StackOverflowについて多くの質問がありましたが、この特定の状況に対する適切な答えは見当たりませんでした。

「is-required」クラスを条件付きで適用したい基本的なdivがあります。これが私のアプローチです：

<div className={`some-class ${isRequired && 'is-required'}`}>

ここでの主な問題は、isRequiredがfalseの場合、コンパイルされたHTMLコードが次のようになることです。

<div class='some-class false'>

明らかに、次のような3項演算子を使用して、代わりに空の文字列を返すことができます。

<div className={`some-class ${isRequired ? 'is-required' : ''}`}>

しかし、コンパイルされたHTMLコードには、クラスに含まれるこの余分なランダムスペースがあり、レンダリングの問題は発生しませんが、それでも私はそれが好きではありません。

<div class='some-class '>

それでも、「someClass」の後のスペースを削除して「isRequired」の前に含めることはできますが、今では読みにくく、ちょっと不格好に感じます。

<div className={`some-class${isRequired ? ' is-required' : ''}`}>

クラス名などのユーティリティについて聞いたことがありますが、追加のパッケージを必要としない簡単なソリューションを探しています。

ここで推奨されるアプローチは何ですか？

javascriptreactjsclass-attributestemplate-strings
5
Drew Jex

実際、それを行うには多くの方法があります。そのうちの1つを次に示します。

<div className={isRequired ? 'some-class is-required': 'some-class'}>

または、nullを返すことができます

<div className={isRequired ? 'is-required' : null}>

順番に、複数のクラスがある場合。

<div className={isRequired ? 'some-class is-required': isDisabled ? 'some-disabled-class' : 'some-class'}>

https://reactjs.org/docs/conditional-rendering.html

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      isRequired: false
    };
}

  render() {
    return (
      <div className="App">
       <div className={this.state.isRequired ? 'is-required' : null}>Null</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
5
Shrroy

このユーティリティ関数が役立つかもしれません（タグ付きテンプレートとして使用されます）：

const c = (strings = [], ...classes) => {
  let myClass = '';
  strings.forEach((s, i) => {
    myClass += s + (classes[i] || '');
  });

  return myClass.trim().replace('  ', ' ');
}

今、あなたはそれをこのように使うことができます：

className={c`my-class ${this.props.done && 'done'} selected`}

または

className={c`some-class ${isRequired && 'is-required'} ${isDisabled && 'some-disabled-class'}`}
4
Mohamed Ramrami
<div className={isRequired && 'is-required'}>Required</div>

評価短絡の使用（ https://en.wikipedia.org/wiki/Short-circuit_evaluation ）

1
Rick Rickards

インポート/エクスポートシステムを使用している場合は、クラス名を結合するためにこのパッケージを使用することを強くお勧めします。

https://www.npmjs.com/package/classnames

0
Con Antonakos

誤った値が必要ない場合に使用できます。

<div className={`some-class${isRequired && ' is-required' || ''}`}>
0
Naim YÜREK