Attributes In JSX

Attributes In JSX

JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this:

my-attribute-name="my-attribute-value"

Here are some JSX elements with attributes:

<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>;

 

 

A single JSX element can have many attributes, just like in HTML:

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;

 

 

---

JSX 안에 속성들

JSX요소들은 attribute들을 가질 수 있다. 마치 html요소들이 그러한것처럼.

JSX 속성은 html 문법을 사용한다. : name = value

값은 ""에 감싸져야만한다.  이렇게: 

 

my-attribute-name="my-attribute-value"

 

여기 JSX 속성들을 사용한 요소들이 있다. 

 

<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>;

 

 한개의 JSX요소는 많은 속성들을 가질 수 있다. HTML처럼.

 

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;

 

 

 

출처| 코드카데미

를 번역한 내용입니다.