if/else 뒤에 사용할 "let" 또는 "const"를 선언하려면 if/else를 사용하십시오.

if/else 뒤에 사용할 "let" 또는 "const"를 선언하려면 if/else를 사용하십시오.

왜 그랬는지는 모르겠지만 전화할 수 없는 것 같아요.let또는const변수를 선언하면if/else진술.

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

어떻게 하면 고칠 수 있을까요?

이것은 단순한 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`

기타 코멘트/답변서에 기재되어 있는 바와 같이let그리고.const블록 범위이므로 예제에서는 작동하지 않습니다.

DRYER 코드의 경우, 3진수를 사용하는 것은, 3진수에 의존하는 부분뿐입니다.

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

let그리고.const블록 레벨의 스코프입니다.즉, 에서 정의한 블록 내에서만 사용할 수 있습니다. { // 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`;
}

대안(좋은지, 우아한지는 잘 모르겠지만):

const classes = (() => {
  if (withBorder) {
    return `${styles.circularBorder}...`;
  } else {
    return `${styles.dimensions}...`;
  }
})();

사용 안 함if-else-스테이트먼트하지만삼원적인표현:

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`;

또는 단순히 외부로 선언할 수도 있습니다.ifblock: 중복도 제거할 수 있습니다.

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}`;
}

그리고 난잡한 클래스네임 구조도 봐주세요.

let그리고.const블록 레벨의 범위가 지정되므로 블록 외부에서 정의해야 합니다. var호이스트 아웃이 되기 때문에 효과가 있습니다.

정의할 수 있습니다.classes이 되기 전에if@finalfreq와 같은 블록

또는

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

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

ESLint 표준에서는 행의 시작 부분에 있는 연산자를 좋아합니다.컴퓨터 타임루프가 아닌 한 긴 조건도 추상화해야 합니다.

이 경우는 현도 길기 때문에, 이것도 추상화하겠습니다.버기의 방식은 대부분의 라이너들이 순응을 이유로 그의 스타일을 손상시킬 수 있다는 것이 문제입니다.

이렇게 하면 모든 것이 정상적이고 읽기 쉽게 유지됩니다. 삼항문에 익숙하다면, 그래야 합니다.

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 ]

심플하게, 이것만 하면 됩니다.

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>
);

이것 또한 약간의 청소가 있습니다. 클래스는 두 번 사용했고,circularBorder다른 점이 있다면...

언급URL : https://stackoverflow.com/questions/40877053/use-if-else-to-declare-a-let-or-const-to-use-after-the-if-else