왜 \'인접한 JSX 요소는 둘러싸는 태그로 래핑되어야 합니까?\'라는 메시지가 표시됩니다.-JS 튜토리얼-php.cn

왜 \'인접한 JSX 요소는 둘러싸는 태그로 래핑되어야 합니까?\'라는 메시지가 표시됩니다.

Patricia Arquette

풀어 주다： 2024-11-02 18:07:29

원래의

284명이 탐색했습니다.

Why do I get

인접한 JSX 요소를 묶어야 함

상태 변수를 기반으로 구성 요소를 조건부로 렌더링하려는 경우 규칙을 준수하는 것이 중요합니다. 인접한 JSX 요소는 둘러싸는 태그 내에 래핑되어야 합니다. 이 요구 사항은 React 구성 요소 트리의 유효성을 보장합니다.

if 문을 사용하여 요소를 적절하게 묶지 않고 조건부로 렌더링할 때 문제가 발생합니다. 예를 들어 코드에서

if(this.state.submitted==false) {
  // ...
}

로그인 후 복사

이렇게 하면 "인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다."라는 구문 분석 오류가 발생합니다. 이 문제를 해결하려면

와 같은 적절한 상위 태그 내에 조건부 요소를 래핑해야 합니다.

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

로그인 후 복사

또는 추가 래핑 레이어 없이 조각을 표시하려면 다음을 수행할 수 있습니다. React 16.2에 도입된 Fragments API를 활용하세요.

return (
  <>
    {/* Conditional content here */}
  </>
);

로그인 후 복사

이 구문을 사용하면 추가 DOM 노드를 도입하지 않고도 JSX 요소를 그룹화할 수 있습니다.

위 내용은 왜 \'인접한 JSX 요소는 둘러싸는 태그로 래핑되어야 합니까?\'라는 메시지가 표시됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!