구문 분석 오류 : 인접한 JSX 요소는 둘러싸는 태그로 래핑되어야합니다.

질문 : 구문 분석 오류 : 인접한 JSX 요소는 둘러싸는 태그로 래핑되어야합니다.

---

true 경우에만 렌더링되도록 React.js 앱을 설정하려고합니다.

내 렌더링 기능이 설정되는 방식은 다음과 같습니다.

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>

if(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>
    )
  },

기본적으로 여기서 중요한 부분은 if(this.state.submitted==false) 부분입니다 (제출 된 변수가 false div 요소가 표시되기를 원합니다).

그러나 이것을 실행할 때 질문에 오류가 발생합니다.

포착되지 않은 오류 : 구문 분석 오류 : 38 행 : 인접 JSX 요소는 둘러싸는 태그로 래핑되어야합니다.

여기서 문제는 무엇입니까? 이 작업을 위해 무엇을 사용할 수 있습니까?

답변

---

구성 요소를 둘러싸는 태그 사이에 넣어야합니다. 즉, 다음을 의미합니다.

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

대신 :

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

편집 : Fragments API에 대한 Joe Clay의 의견

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

출처 : https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag