programing

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

procenter 2023. 2. 2. 21:57

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

내 컴퓨터를 셋업하려고 합니다.React.js을 사용하여 한 변수가 이 a a a a 。true

렌더링 기능의 설정 방법은 다음과 같습니다.

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) 부분을 )div가 「」로 되어 있는 .false

그러나 이 작업을 실행하면 다음과 같은 오류가 나타납니다.

수집되지 않은 오류: 구문 분석 오류: 줄 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 />
    </>
)

이 질문에 답하기엔 늦었지만 설명이 추가될 것 같았다.

코드 내의 어느 위치에서나 2개의 요소를 동시에 반환하기 때문에 발생합니다.

예

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

부모 요소로 감싸야 합니다.

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

상세설명

★★★★★★★★★★★★★★★★★★★★.jsx가

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

여기에

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

하지만 이렇게 하면

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

이것은 다음과 같이 변환됩니다(그림의 목적으로만, 실제로는error : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

위의 코드에서는 메서드콜에서2회 반환을 시도하고 있는 것을 알 수 있습니다.이것은 명백히 잘못된 것입니다.

편집 - 리액트 16 및 자체 방향의 최신 변경 사항

의 자 "div"로 할 수 .React.Fragments.

React.Fragments )<React.Fragments>)는 조금 더 빠르고 메모리 사용량이 적습니다(추가 DOM 노드를 작성할 필요가 없으며 DOM 트리가 복잡하지 않습니다).

예(In React 16.2.0)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

또는

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </React.Fragments>
  );
}

또는

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

반응 요소는 하나의 요소만 반환해야 합니다.두 태그를 다른 요소 태그로 래핑해야 합니다.

당신의 렌더 함수가 아무것도 반환하지 않는 것도 알 수 있습니다.컴포넌트는 다음과 같습니다.

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

, 이 때, 이 때, 이 때, 이 때, 이 때는 수 점에 해 주세요.if「」「」、「。

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)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

다른 답변에서 제시한 것처럼 다른 div로 랩하지 않으려면 어레이로 랩하면 됩니다.

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

다음과 같이 쓸 수 있습니다.

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

의 경우 경고 됩니다.Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

은, 「」를 할 수 .key컴포넌트에 속성을 부여합니다.이러한 속성을 수동으로 추가할 경우 다음과 같이 추가합니다.

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

다음은 키에 대한 몇 가지 추가 정보입니다.구성 vs 상속

문제

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

즉, 여러 형제 JSX 요소를 잘못된 방식으로 반환하려고 합니다.HTML이 아니라 JSX! 코드가 JSX에서 JavaScript로 변환됩니다.예를 들어 다음과 같습니다.

render() {
  return (<p>foo bar</p>);
}

다음과 같이 변환됩니다.

render() {
  return React.createElement("p", null, "foo bar");
}

일반적으로 프로그래밍을 처음 접하는 경우를 제외하고 함수/메서드(모든 언어의)는 임의의 수의 파라미터를 사용하지만 항상 하나의 값만 반환한다는 것을 이미 알고 있습니다.이러한 이유로 여러 형제 컴포넌트를 반환할 때 문제가 발생하는 것을 알 수 있습니다.createElement()동작합니다.하나의 요소에 대한 파라미터만 취득하고 그것을 반환합니다.따라서 1개의 함수 호출에서 여러 요소를 반환할 수 없습니다.

이게 왜 먹히는지 궁금하신 적 있으시다면...

render() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>
  );
}

근데 이게 아니라...

render() {
  return (
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
  );
}

첫 에서는 둘 다 '둘 다'라고 되어 때문입니다.<p>는 의 are are are of of of of of of의 입니다.의 일부입니다.children<div>- . - - - when are are of의 일부인 children형제적 요소를 무제한으로 표현할 수 있습니다.이것이 어떻게 변화하는지 살펴보세요.

render() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "foo"),
    React.createElement("p", null, "bar"),
    React.createElement("p", null, "baz"),
  );
}

솔루션

실행 중인 React 버전에 따라 몇 가지 옵션이 있습니다.

fragment를 사용합니다(React v16.2+ 한정).

React v16.2에서 React는 하위 항목을 직접 반환하는 노드 없는 구성 요소인 Fragments를 지원합니다.

어레이에 있는 아이를 되돌리는 것(아래 참조)에는 몇 가지 단점이 있습니다.
- 배열의 하위 항목은 쉼표로 구분해야 합니다.
- 어레이의 하위 항목에는 React의 주요 경고를 방지하기 위한 키가 있어야 합니다.
- 문자열은 따옴표로 묶어야 합니다.
이것들은 fragment의 사용에서 제외됩니다.다음은 파편에 싸인 아이들의 예입니다.
```
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
```
다음과 같이 디커버리가 됩니다.
```
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
```
첫 번째 스니펫에는 Babel v7.0 이상이 필요합니다.
어레이 반환(React v16.0+만)

React v16에서는 React Components가 어레이를 반환할 수 있습니다.이는 모든 형제 구성 요소를 상위 구성 요소로 래핑해야 했던 이전 버전의 React와는 다릅니다.

즉, 다음 작업을 수행할 수 있습니다.
```
render() {
  return [<p key={0}>foo</p>, <p key={1}>bar</p>];
}
```
이것은 다음과 같이 바뀝니다.
```
return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")];
```
위의 내용은 어레이를 반환하는 것에 주의해 주십시오.어레이는 React 버전 16 이후 유효한 React Elements입니다.이전 버전의 React에서 어레이는 올바른 반환 개체가 아닙니다.

또한 다음 항목은 유효하지 않습니다(어레이를 반환해야 합니다).
```
render() {
  return (<p>foo</p> <p>bar</p>);
}
```
요소를 상위 요소로 줄 바꿈

다른 솔루션은 형제 컴포넌트를 랩하는 부모 컴포넌트를 만드는 것입니다.children이것은 이 문제를 해결하는 가장 일반적인 방법으로 모든 버전의 React에서 작동합니다.
```
render() {
  return (
    <div>
      <h1>foo</h1>
      <h2>bar</h2>
    </div>
  );
}
```
참고: 이 답변의 상단을 다시 한 번 살펴보시면 자세한 내용과 이 답변이 어떻게 변화하는지 알 수 있습니다.

React 16.0.0: 렌더에서 어레이로 여러 컴포넌트를 반환할 수 있습니다.

return ([
    <Comp1 />,
    <Comp2 />
]);

React 16.2.0 > 1개의 Fragment 태그로 렌더로부터 복수의 컴포넌트를 반환할 수 있습니다.단편화

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

리액트 16.2.0 > 이 속기 구문을 사용할 수 있습니다.(일부 오래된 툴버전은 지원하지 않기 때문에 명시적으로 기술할 필요가 있습니다.<Fragment>툴링이 따라잡을 때까지).

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

컴포넌트를 랩하지 않는 경우는, 다음의 방법으로 기입할 수 있습니다.

대신:

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

다음과 같이 쓸 수 있습니다.

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

부모 요소 div를 사용하여 모든 요소를 랩하거나 상위 구성요소(HOC) 개념을 사용할 수 있습니다. 즉, react js 응용 프로그램에 매우 유용합니다.

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

또는 HOC는 매우 단순하고 복잡하지 않습니다.프로젝트에 파일 hoc.js를 추가하고 이들 코드를 추가하는 것이 좋습니다.

const aux = (props) => props.children;
export default aux;

사용하시는 곳에 hoc.disp 파일을 Import 합니다.div 요소로 랩하는 대신 hoc으로 랩할 수 있습니다.

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

반응에는 JSX 식에 정확히1개의 가장 바깥쪽 요소가 있어야 한다는 규칙이 있습니다.

틀렸어

const para = (
    <p></p>
    <p></p>
);

맞아요.

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

리액트 16은 배열로 반환되므로 div와 같은 하나의 요소로 둘러싸여 있어야 합니다.

잘못된 접근법

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

오른쪽 접근(사용 중인 하나의 div 또는 다른 요소의 모든 요소)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

리액트 컴포넌트는 단일 컨테이너로 래핑해야 합니다.예를 들어 "< div >.."와 같은 태그일 수 있습니다. < / div > "

ReactCSTransition Group의 렌더 메서드를 확인할 수 있습니다.

보기 가져오기 및 줄 바꿈View. 포장을 합니다.div효과가 없었습니다.

import { View } from 'react-native';
...
    render() {
      return (
        <View>
          <h1>foo</h1>
          <h2>bar</h2>
        </View>
      );
    }

무효: 하위 요소뿐만 아니라

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

유효: 하위 요소 아래의 루트 요소

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

추가만 하면 됩니다.

<>
  // code ....
</>

Rect-Native 개발자용.FlatList에서 renderingItem을 실행하는 동안 이 오류가 발생했습니다.Text 컴포넌트가 2개 있었어요.나는 그것들을 아래와 같이 사용하고 있었다.

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>
}

그러나 이 견인기를 Inside View Components에 장착하고 나니 효과가 있었습니다.

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

다른 컴포넌트를 사용하고 있을 수 있지만 View에 추가하는 것이 도움이 될 수 있습니다.

리턴 스테이트먼트 내에 여러 개의 Div를 포함하려고 할 때도 문제가 발생할 수 있다고 생각합니다.구성요소가 블록 요소로 렌더링되도록 하려면 이 작업을 수행할 수 있습니다.

다음은 여러 개의 div를 사용하여 두 개의 구성 요소를 올바르게 렌더링하는 예입니다.

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

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

저작자표시

'programing' 카테고리의 다른 글

두 날짜 간의 시간 차이를 분 단위로 계산 (0)	2023.02.02
Java에서 toString()을 올바르게 덮어쓰려면 어떻게 해야 합니까? (0)	2023.02.02
테이블을 잠그지 않고 테이블을 변경하시겠습니까? (0)	2023.02.02
vue-router 매개 변수 사용 방법 (0)	2023.02.02
문자열의 하위 문자열 발생 횟수 (0)	2023.02.02

현재글해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

C++, spring3, javascript, c#, java, jquery, Spring,

Today :
Yesterday :

procenter

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

문제

솔루션

fragment를 사용합니다(React v16.2+ 한정).

어레이 반환(React v16.0+만)

요소를 상위 요소로 줄 바꿈

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

해석 오류:인접한 JSX 요소는 둘러싸인 태그로 감싸야 합니다.

문제

솔루션

fragment를 사용합니다(React v16.2+ 한정).

어레이 반환(React v16.0+만)

요소를 상위 요소로 줄 바꿈

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바