React에서 \"구문 분석 오류: 인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다\" 오류가 발생하는 이유는 무엇입니까?
- Mary-Kate Olsen원래의
- 2024-11-05 09:36:02370검색
분석 오류: 인접한 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>
이 수정된 코드에서는 조건부로 렌더링된 요소를
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>
이 코드에서는 위 내용은 React에서 \"구문 분석 오류: 인접한 JSX 요소는 둘러싸는 태그에 래핑되어야 합니다\" 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!