web-dev-qa-db-ja.com

if elseを使用して、if / elseの後に使用する `let`または` const`を宣言しますか？

理由はわかりませんが、if/elseステートメントで変数を宣言すると、letまたはconst変数を呼び出せないようです。

if (withBorder) {
  const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
return (
  <div className={classes}>
    {renderedResult}
  </div>
);

このコードを使用すると、classes is not definedと表示されます。

しかし、constをvarクラスに変更しても、classes used outside of binding contextおよびall var declarations must be at the top of the function scopeについての警告が表示される場合

どうすれば修正できますか？

javascriptif-statementreactjsconstlet
25
Johhan Santana

三項割り当てを使用する必要があります。

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

他のコメント/回答で指定されているように、letとconstはスコープがブロックされているため、この例では機能しません。

DRYerコードの場合、文字列リテラル内に3項をネストすることもできます。

 const classes = `${withBorder ? styles.dimensions: ''} ${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
30
maioman

letとconstはブロックレベルのスコープです。つまり、ieで定義されたブロック内でのみ使用できます。 { // if defined in here can only be used here }

この場合、if/elseステートメントの上に定義するだけです

let classes;

if (withBorder) {
  classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
30
finalfreq

別の方法（goodまたはelegantでもわかりません）：

const classes = (() => {
    if (withBorder) {
      return `${styles.circularBorder}...`;
    } else {
      return `${styles.dimensions}...`;
    }
})();
7
rap-2-h

if-_else- statementではなく、3項式を使用しないでください。

const classes = withBorder
  ? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
  :                          `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

または、ifブロックの外側で宣言するだけで、重複を取り除くこともできます。

let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
if (withBorder) {
  classes += ` ${styles.circularBorder}`;
  // or if you care about the order,
  // classes = `${styles.circularBorder} ${classes}`;
}

乱雑なクラス名の構築 もご覧ください。

3
Bergi

letとconstはブロックレベルのスコープであるため、ブロックの外部で定義する必要があります。 varは動作するため動作します。

@ finalfreq のようなclassesブロックの前にifを定義できます

または

let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

if (withBorder) {
  classes += `${styles.circularBorder}`;
}
3
antyang

ESLint標準では、行頭の演算子が好きです。コンピュータのタイムループにない限り、長い条件文も抽象化する必要があります。

この特定のケースでは、文字列も長いので、それらも抽象化します。ベルギのやり方の問題は、ほとんどのリンターが適合性の理由で彼のスタイルを損なうことです。

この方法により、3進法に慣れている場合は、すべてを正常に読みやすくすることができます。

const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]
1
Ray Foss

シンプル、これを行うだけです：

const genericStyle = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`,

classes = withBorder ? `${styles.circularBorder} ${genericStyle}` : genericStyle;

return (
  <div className={classes}>
    {renderedResult}
  </div>
);

これにはいくつかのクリーンアップもあり、クラスは2回使用され、circularBorderのみが違います...

0
Alireza