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

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

Mary-Kate Olsen원래의: 2024-11-05 09:36:02450검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

if for Error using dom this

성명：

이전 기사：웹 개발에서 앞서 나가세요: 최신 뉴스, 도구 및 통찰력 #57다음 기사：웹 개발에서 앞서 나가세요: 최신 뉴스, 도구 및 통찰력 #57