단락(&) 조건부 성분으로 아무것도 아닌 0을 나타내는 반응

단락(&) 조건부 성분으로 아무것도 아닌 0을 나타내는 반응

컴포넌트 또는 아무것도 표시되지 않는 다음과 같은 간단한 단락 스테이트먼트가 있습니다.

{profileTypesLoading && <GeneralLoader />}

스테이트먼트가 false일 경우 이 스테이트먼트는0아무것도 없는 대신.

나는 한 적이 있다console.log(profileTypesLoading)어떤 상태인지 빨리 보기 위해서profileTypesLoading속성은 1 또는 0 중 하나입니다.0은 false여야 합니다...아무것도 렌더링할 수 없습니다.그렇죠?

왜 이런 일이 일어났는지 아십니까?

상태가 거짓이기 때문에 두 번째 인수는 반환되지 않습니다.<GeneralLoader />)가 반환됩니다.profileTypesLoading리액트는 또는boolean 에 대해 렌더링을 건너뛰고 또는string 에 대해 렌더링하기 때문에 리액트는 렌더링합니다.

안전을 위해 삼원식을 사용할 수 있습니다.{condition ? <Component /> : null}또는 boolean cast 당신의 상태를{!!condition && <Component />}

0은 거짓 값이기 때문에 &&에 의해 평가되면 0이 반환됩니다.그러나 0은 숫자이므로 React에서 렌더링할 수 있습니다.

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing

---

TLDR

이는 javascript 자체가 [truthy 및 false values][1]를 처리하는 방식 때문입니다.

JavaScript에서 truthy 값은 부울 컨텍스트에서 발견되었을 때 true로 간주되는 값입니다.false로 정의되지 않는 한 모든 값은 truthy입니다(false, 0, ", null, defined 및 NaN 제외).

& & 연산자와 함께 사용할 경우 반환되는 값은 왼쪽 값에 따라 달라집니다.

• 왼쪽 값이 truthy이면 오른쪽 값이 반환됩니다.
• 왼쪽 값이 거짓일 경우 값이 반환됩니다.

예:

// Truthy values
1 && "hello" // => "hello"
"a string" && "hello" // => "hello"

// Falsy values
0 && "hello" // => 0
false && "hello" // => false
null && "hello" // => null
undefined && "hello" // => undefined

JSX는 [JaScript 구문 확장][2]이므로 동일한 규칙이 적용됩니다.단, 문제는 **입니다.

문제는 0은 거짓 값이기 때문에 &&에 의해 평가되면 0이 반환된다는 것입니다.단, 0은 숫자이기 때문에 React에서 렌더링할 수 있습니다.

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders 0

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing

이렇게 하면 문제가 해결됩니다.

{!!profileTypesLoading && <GeneralLoader />}

0을 false로 변환하기 때문입니다.그 이유는 그 일이0다음 조건은 실행되지 않고 JavaScript의 숫자처럼 동작하므로 이중 부정이 도움이 됩니다.

더블 뱅(!)을 사용할 수 있습니다.그러면 값의 부울 true/false 어소시에이션이 반환되며 0은 렌더링되지 않습니다.

{!!profileTypesLoading && <GeneralLoader/>}

보다 간단한 접근법:

{Boolean(profileTypesLoading) && <GeneralLoader />}

처음에 잘못된 상태를 평가하는 방법은 3항과 함께 상수(constant)를 사용하는 것입니다.예:

이 경우 someCollecationProperty가 비어 있으면 간단한 버튼이 표시되고 그렇지 않으면 some-options-menu가 있는 버튼이 표시됩니다(Material UI 예).

export default function MyComponent({ obj }) {

  const jsxResponse = !obj.someCollecctionProperty.length ? <Button>No Action</Button> 
    : 
    <>
      <Button 
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true" 
        variant="contained" 
        onClick={handleClick} 
        color={'primary'}>
          <ThumbUpAltOutlinedIcon/>OK
      </Button>
      <Menu
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
      >
        {obj.someCollecctionProperty.map((option) => (
          <MenuItem key={option.id} onClick={handleClose}>
            <Avatar variant="square" alt={option.name} src={option.url}/>{option.configName}
          </MenuItem>
        ))}
      </Menu>
    </>;

  return (<div>{jsxResponse}</div>);
}

컴포넌트 jsxResponse입니다.0으로는 수

이 코드

{ Boolean(profileTypesLoading) ? <GeneralLoader /> : <></> }

또한 문제를 해결합니다.저는 초보자이기 때문에 단점이 있는지 부작용이 있는지 모르겠습니다.

언급URL : https://stackoverflow.com/questions/53048037/react-showing-0-instead-of-nothing-with-short-circuit-conditional-component