Nested JSX

Nested JSX

You can nest JSX elements inside of other JSX elements, just like in HTML.

Here’s an example of a JSX <h1> element, nested inside of a JSX <a> element:

 

<a href="https://www.example.com"><h1>Click me!</h1></a>

To make this more readable, you can use HTML-style line breaks and indentation:

 

<a href="https://www.example.com">
  <h1>
    Click me!
  </h1>
</a>

 

If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:

 

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

 

Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! Here’s an example of a nested JSX expression being saved as a variable:

 

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

 

 

---

중첩된 JSX

 

당신은 다른 JSX 요소들안에 JSX요소들을 중첩할 수 있다. 마치 HTML처럼.

여기 JSX <h1> 태그에 <a>태그가 안에 중첩된 예시가 있다. 

<a href="https://www.example.com"><h1>Click me!</h1></a>

 

이것을 더 가독성있게 만들기 위해, 당신은 html-style line breaks와 들여쓰기를 사용할 수 있다. 

<a href="https://www.example.com">
  <h1>
    Click me!
  </h1>
</a>

 

JSX 식이 둘 이상의 행을 차지하는 경우 다중 행 JSX 식을 괄호로 묶어야 한다.

 

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

 

Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! 

 

중첩된 JSX식은 변수로써 저장될수도 있고, 함수에 전달될수 있다. 중첩되지 않은 JSX식이 가능한 것처럼!

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

 

 

출처: codecademy

를 번역했습니다.