JSX(React)에서 곱슬머리 괄호는 무엇을 의미합니까?

JSX(React)에서 곱슬머리 괄호는 무엇을 의미합니까?

예를 들어 반응에서 스타일을 설정하려면

var css = {color: red}

그리고.

<h1 style={css}>Hello world</h1>

두 번째 코드 스니펫에서 css 주위에 곱슬곱슬한 중괄호가 필요한 이유는 무엇입니까?

중괄호는 JSX 파서가 그 사이의 내용을 문자열이 아닌 JavaScript로 해석해야 한다는 것을 알리기 위한 특별한 구문입니다.

변수나 JSX 내의 참조와 같은 JavaScript 식을 사용할 때 필요합니다.표준 이중 따옴표 구문을 다음과 같이 사용할 경우:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX는 변수를 사용하려는 의도를 알지 못합니다.css문자열 대신 style 속성으로 지정합니다.그리고 변수 주위에 곱슬곱슬한 괄호를 배치하여css파서에게 "변수 내용을 가져가세요.css(기술적으로는 내용을 평가하는 것)

이 프로세스를 일반적으로 "인터폴레이션"이라고 합니다.

변수를 사용하지 않는 경우cssJSX의 외관은 다음과 같습니다.

<h1 style={ {color: 'red'} }>Hello world</h1>

양 곱슬머리 교정기가 헷갈리신 것 같아요.

그러니까 JSX에서 곱슬곱슬한 괄호는process the inner value in JavaScript따라서 바깥쪽 괄호는 정확히 이 용도로 사용됩니다.

근데...style숙박업소는object그리고 물체는 또한 그것을 감싸기 위해 다른 한 쌍의 곱슬곱슬한 괄호가 필요하다.그게 내면의 목적이야

"html" 내의 변수 값(그래서 렌더링 부분 내)을 사용하려면 물결 괄호를 사용합니다.이것은 앱에 변수의 값을 가져다가 거기에 넣으라고 하는 하나의 방법일 뿐이지, 단어가 아닙니다.

바깥쪽 중괄호는 구문이 javascript로 해석되어야 함을 JSX 파서에 알려줍니다.스타일 변수가 객체를 받아들이기 때문에 안쪽 중괄호가 사용됩니다.

이 점을 명확히 하자.

<h1 style={interpret javascritp {interpret the object} }> hello </h1>

언급URL : https://stackoverflow.com/questions/43904825/what-do-curly-braces-mean-in-jsx-react