기본 조건부 렌더링 반응

일반적으로 React Native의 조건부 렌더링은 React과 동일합니다. 그러나 React Native에서는 Text 구성 요소 내에서만 문자열을 렌더링할 수 있다는 점에 유의하십시오. 예를 들어 View 안에 문자열을 넣으려고 하면 오류가 발생합니다.

논리 && 연산자가 있는 경우 인라인.

<View>
  {!!error && <ErrorMessage />}
</View>

☝🏻 이중 부정!! 연산자는 여기에서 매우 중요합니다(또한 Boolean 함수를 사용할 수 있음) 조건의 왼쪽 부분이 부울 값이 되도록 보장하기 때문입니다.

왜 중요한가요? 논리 "and"연산자&&는 왼쪽이 truthy인 경우 조건의 오른쪽을 반환하기 때문입니다. 왼쪽이 falsy 인 경우 조건의 왼쪽을 반환합니다.

이미징에는 다음과 같은 구성 요소가 있습니다.

<View>
  {error && <ErrorMessage />}
</View>

error 변수가 object , null 또는 undefined 이면 모든 것이 예상대로 작동합니다. 그러나 오류( error = '' )에 대해 빈 문자열을 얻으면 View 구성 요소 내에서 문자열을 렌더링할 수 없기 때문에 구성 요소가 중단됩니다.

// error = ''
// {error && <something>} will return the error variable,
// which equals to the empty string and we will get:
<View>
  ''
</View>
// which will throw an error, because we 
// can't render strings inside a View

인라인 if-else with ternary ? 운영자.

{error ? <ErrorMessage /> : <SuccessMessage />}

또는

{error ? <ErrorMessage /> : null}

여기서 우리는 구성 요소 구조와 반환 유형에 따라 null 또는 <></>(React Fragment)를 반환할 수 있습니다.

if 문

...

const Error = () => {
  if (!error) {
    return null
  }

  return <ErrorMessage />
}

return (
  <View>
    <Error />
  </View>
)

코드 예

this Expo Snack을 사용하여 전체 코드를 보고 가지고 놀고, 💖 버튼을 누르면 즐거운 해킹이 됩니다! 🎉

학점

사진: Isaac Struna on Unsplash .