React.js에서 인접한 JSX 요소에 둘러싸는 태그가 필요한 이유는 무엇입니까?

인접 JSX 요소에는 엔클로징 태그가 필요함

React.js 구성 요소를 생성할 때 인접한 JSX 요소가 엔클로징 태그 내에 래핑되도록 하는 것이 중요합니다. 구문 분석 오류를 방지하려면 태그를 사용하세요.

제공된 코드 조각에서 오류:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

는 if 문의 조건부 렌더링으로 인해 div 요소가 둘러싸는 컨테이너 없이 렌더링된다는 것을 나타냅니다. 이 문제를 해결하려면 div와 같은 적절한 태그 내에 이러한 요소를 래핑해야 합니다.

<code class="jsx">if (this.state.submitted === false) {
  return (
    <div>
      <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를 사용하여 불필요한 요소를 DOM에 추가하지 않고 둘러싸는 컨텍스트를 생성할 수 있습니다. :

<code class="jsx">if (this.state.submitted === false) {
  return (
    <React.Fragment>
      <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>
    </React.Fragment>
  );
}</code>

위 내용은 React.js에서 인접한 JSX 요소에 둘러싸는 태그가 필요한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!