React 커스텀 컴포넌트의 조건부 렌더링 문제 살펴보기

Question

내 React 애플리케이션의 사용자 정의 구성요소에서 조건부 렌더링에 문제가 있습니다. 저는 특정 조건이 충족될 때만 콘텐츠를 렌더링하는 조건부 렌더링용 사용자 정의 구성 요소를 만드는 작업을 해왔습니다. 현재 코드는 다음과 같습니다.

'react'에서 React 가져오기;

function ConditionalRenderComponent({ 조건, 하위 }) {
  반품 (
    <div>
      {조건 및 어린이}
    </div>
  );
}

기본 ConditionalRenderComponent 내보내기;

이 맞춤 구성요소를 사용하는 동안 condition인 경우에도 콘텐츠가 children 액세스하고 실행했습니다. 이는 조건이 false인 경우 맞춤 구성요소 없이 직접 condition &&

를 사용하는 동작과 다릅니다. 콘텐츠에 대한 접근이 적절하게 차단되었습니다.

맞춤 구성요소를 사용하는 방법은 다음과 같습니다.

'react'에서 React, { useState, useEffect } 가져오기;
'./ConditionalRenderComponent'에서 ConditionalRenderComponent를 가져옵니다.

함수 앱() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        사용자 이름: 'john_doe',
        이메일: 'john@example.com'
      });
    }, 1000);
  }, []);

  반품 (
    <div>
      <h1>내 앱에 오신 것을 환영합니다</h1>
      <ConditionalRenderComponent 조건={isLoggedIn}>
        <div>
          <p>안녕하세요, {userData.username}님! </p>
          <p>귀하의 이메일: {userData.email}</p>
        </div>
      </ConditionalRenderComponent>
      {!isLoggedIn <p>사용자 데이터에 액세스하려면 로그인하세요. </p>}
    </div>
  );
}

기본 앱 내보내기;

위의 예에서 userData는 처음에는 null이며 나중에 서버에서 검색된 데이터로 채워집니다. isLoggedIn 조건은 userData

그러나 isLoggedIn 조건이 false(데이터를 가져오기 전)임에도 불구하고 ConditionalRenderComponent userData에 액세스하고 표시합니다. 이로 인해 "TypeError: null 속성을 읽을 수 없습니다('username' 읽기)"라는 오류 메시지가 나타납니다.

표준 조건부 렌더링과의 비교:

다음은 표준 condition

을 사용한 동작을 비교한 것입니다.

// 표준 조건부 렌더링
{isLoggedIn &&
  <div>
    <p>안녕하세요, {userData.username} 님! </p>
    <p>귀하의 이메일: {userData.email}</p>
  </div>
)}

위의 코드에서 볼 수 있듯이 표준 방법을 사용하면 조건이 false일 때 userData 값에 대한 액세스가 올바르게 차단됩니다.

children 속성이 있는 맞춤 구성요소를 사용할 때 동작에 이러한 차이가 발생하는 이유가 무엇인지 잘 모르겠습니다. 디버깅을 시도하고 해결책을 찾아보았지만 아직 명확한 답을 찾지 못했습니다.

이러한 현상이 발생하는 이유와 children 속성에 대해 예상되는 조건부 렌더링 동작을 달성하기 위해 맞춤 구성요소를 수정하는 방법에 대한 통찰력이나 제안을 보내주시면 감사하겠습니다.

도움을 주셔서 미리 감사드립니다!

Answer 1

왜 이런 일이 발생하나요?

이런 일이 발생하는 이유는 ConditionalRenderComponent컴포넌트에서 하위 요소가 (함수에 대한 매개변수와 같은) 속성으로 전달되기 때문이라고 생각합니다. JSX 표현식은 함수에 대한 인수로 평가됩니다.

즉, condition이 false인 경우에도 condition为false，children在传递给ConditionalRenderComponent는

함수에 전달되기 전에 평가됩니다.

이해하기 쉬운 예

PlayStation（在你的左手）和数学试卷成绩아이에게

(오른손)을 주고 그 아이가 90/100점 이상을 득점하면 플레이스테이션을 받게 될 것이라고 말합니다.

children아이는 이미 왼손에 PlayStation을 볼 수 있으므로(JSX 표현으로

전달), 상태가 확인되기 전에 이미 사용하고 있는 것입니다.

children이제 주먹을 쥐면

를 함수로 전달하는 것과 같으며, 오른손의 조건이 참인지 확인하기 전에는 왼손에 무엇이 있는지 평가할 수 없습니다.

솔루션

children。这样，您可以确保只有在condition为真时才会评估children구성 요소에서 직접 렌더링하는 대신 함수를 하위 요소로 사용하여 사용자 정의 구성 요소를 수정합니다

. 이렇게 하면 조건이 true인 경우에만

가 평가됩니다.

ConditionalRenderComponent 변경 사항

으아악 🎜ConditionalRenderComponent 렌더링 변경 사항🎜 으아악

Answer 2

조건부 렌더링을 위한 컴포넌트를 생성하는 것을 권장하지는 않지만, 만들고 싶다면 렌더링 속성 패턴을 사용하여 조건이 true인 경우에만 함수가 호출되도록 할 수 있습니다. 이렇게 하면 표현식이 즉시 평가되지 않습니다.

으아악