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

분석 오류: 인접한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!