문제

구문 분석 오류 : 인접한 JSX 요소를 묶는 태그로 묶어야합니다.

이는 여러 형제 JSX 요소를 잘못된 방식으로 반환하려고 함을 의미합니다. HTML을 작성하는 것이 아니라 JSX를 작성한다는 것을 기억하십시오! 코드가 JSX에서 JavaScript로 변환되었습니다. 예를 들면 다음과 같습니다.

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

다음으로 번역됩니다 :

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

일반적으로 프로그래밍에 익숙하지 않은 한, 함수 / 메소드 (모든 언어)는 여러 매개 변수를 사용하지만 항상 하나의 값만 반환한다는 것을 이미 알고 있습니다 . 이를 감안할 때 createElement()작동 방식에 따라 여러 형제 구성 요소를 반환하려고 할 때 문제가 발생했음을 알 수 있습니다 . 하나의 요소에 대해서만 매개 변수를 취하여이를 리턴합니다. 따라서 하나의 함수 호출에서 여러 요소를 반환 할 수 없습니다.

왜 이것이 효과가 있는지 궁금하다면 …

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>-elements 중 일부 children의 <div>– 요소. 그것들이 일부일 때 children우리는 무제한의 형제 요소를 표현할 수 있습니다. 이것이 어떻게 변환되는지 살펴보십시오.

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

솔루션

실행중인 React 버전에 따라이를 해결하기위한 몇 가지 옵션이 있습니다.

• 조각 사용 (React v16.2 + 만 해당)

  React v16.2부터 React는 자식을 직접 반환하는 노드가없는 구성 요소 인 Fragments 를 지원합니다 .

  배열에서 자식을 반환하면 (아래 참조) 몇 가지 단점이 있습니다.

  • 배열의 자식은 쉼표로 구분해야합니다.
  • 배열의 자식에는 React의 키 경고를 방지하기위한 키가 있어야합니다.
  • 문자열은 따옴표로 묶어야합니다.

  이들은 프래그먼트를 사용하여 제거됩니다. 다음은 조각으로 싸인 아이들의 예입니다.

  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 요소입니다. 이전 버전의 React의 경우 배열은 유효한 반환 객체가 아닙니다!

  또한 다음은 유효하지 않습니다 (배열을 반환해야 함).

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

  ---

• 부모 요소로 요소 감싸기

  다른 솔루션에는 형제 구성 요소를 포함하는 상위 구성 요소를 만드는 것이 포함됩니다 children. 이것은이 문제를 해결하는 가장 일반적인 방법이며 모든 버전의 React에서 작동합니다.

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

  참고 : 자세한 내용과이 변환 방법에 대해서는이 답변 상단을 다시 살펴보십시오 .

답변

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

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

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

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

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