JSX Outer Elements

JSX Outer Elements

There’s a rule that we haven’t mentioned: a JSX expression must have exactly one outermost element.

In other words, this code will work:

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

But this code will not work:

 

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!

It’s easy to forget about this rule, and end up with errors that are tough to diagnose.

If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a <div></div>.

 

---

JSX OUTER 태그

우리가 언급하지 않은 규칙이 하나 있다. 

JSX식은 반드시 정확하게 하나의 outermost요소만을 가질 수 있다. 

다른말로 하자면, 아래의 코드는 동작할 것이다. 

 

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

 

그러나 아래의 코드는 동작하지 않는다. 

 

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

 

 

The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!

It’s easy to forget about this rule, and end up with errors that are tough to diagnose.

If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a <div></div>.

 

이 JSX식의 첫번째 오프닝태그와 마지막 클로징태그는반드시 같은 JSX요소에 속해야 한다. 

이 규칙은 잊기 쉽다. 그래서 결국엔 에러를 낼 수 있다. 

만약 당신이 JSX식에 여러개의 OUTER태그를 가져야 한다면, 

해결방법은 <div></div>로 감싸는 것이다. 

 

 

출처 : 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-intro/exercises/jsx-outer-elements

| Codecademy

를 번역하였습니다.