> 웹 프론트엔드 > JS 튜토리얼 > React에서 \'구문 분석 오류: 인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다\' 오류가 발생하는 이유는 무엇입니까?

React에서 \'구문 분석 오류: 인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다\' 오류가 발생하는 이유는 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-05 09:36:02
원래의
488명이 탐색했습니다.

Why am I getting a

분석 오류: 인접한 JSX 요소를 둘러싸는 태그로 묶어야 합니다

React 구성 요소를 렌더링할 때 인접한 JSX 요소를 둘러싸야 한다는 규칙을 준수하는 것이 중요합니다. 부모 태그에. 이 오류는 요소가 공통 상위 요소로 래핑되지 않고 나란히 존재할 때 발생합니다.

오류 원인

제공된 코드에는 다음을 기반으로 두 개의 div 요소를 조건부로 렌더링하는 if 문이 포함되어 있습니다. this.state.submitted 변수의 값. 그러나 이러한 요소는 인접해 있으며 상위 태그로 묶이지 않습니다.

해결책

이 오류를 해결하려면 조건부로 렌더링된 요소를 둘러싸는 태그 내에 래핑하세요. 이렇게 하면 JSX 구조가 유효한지 확인할 수 있습니다. 예를 들어 코드를 다음과 같이 수정할 수 있습니다.

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>
로그인 후 복사
로그인 후 복사

이 수정된 코드에서는 조건부로 렌더링된 요소를

꼬리표. 이렇게 하면 인접한 JSX 요소에 유효한 상위 요소가 있고 오류가 해결됩니다.

Fragments API(선택 사항)

추가 div 태그를 사용하는 대신 Fragments API를 사용할 수 있습니다. . 이를 통해 DOM에 추가 노드를 추가하지 않고도 요소를 그룹화할 수 있습니다. 다음 코드는 프래그먼트를 사용하는 방법을 보여줍니다.

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>
로그인 후 복사
로그인 후 복사

이 코드에서는 조건부로 렌더링된 요소를 래핑하는 구성 요소입니다. 이는

태그이지만 DOM에 추가 노드를 추가하지는 않습니다.

위 내용은 React에서 '구문 분석 오류: 인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿