[javascript] React의 JSX 구문에서 이중 중괄호의 목적은 무엇입니까?

Program / 글쓴이

로부터 튜토리얼 react.js 우리는 이중 중괄호의 사용을 참조하십시오

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

그리고 두 번째 튜토리얼 “Thinking in react”에서 :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

그러나 React JSX 문서 는 이중 중괄호를 설명하거나 언급하지 않습니다. 이 구문 (이중 컬리)은 무엇을위한 것입니까? 그리고 jsx에서 동일한 것을 표현하는 다른 방법이 있습니까? 아니면 문서에서 누락 된 것입니까?

답변

prop 값에 인라인 된 객체 리터럴 일뿐입니다. 그것은

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

답변

중괄호는 여기에 두 가지 용도가 있습니다.

  1. {..}은 JSX의 표현식으로 평가됩니다.
  2. {key : value}는 자바 스크립트 객체를 의미합니다.

간단한 예를 보겠습니다.

<Image source={pic} style={{width: 193}}/>

관찰하면 pic중괄호로 둘러싸여 있습니다. 그것이 변수를 포함하는 JSX 방식입니다. pic자바 스크립트 표현식 / 변수 / 객체가 될 수 있습니다. {2 + 3}과 같은 작업을 수행 할 수도 있으며 {5}로 평가됩니다.

여기서 스타일을 분석해 봅시다.
{width: 193}Javascript 객체입니다. 이 객체를 JSX에 포함하려면 중괄호가 필요합니다.{ {width: 193} }

참고 : JSX에 모든 종류의 자바 스크립트 표현식 / 변수 / 객체를 포함하려면 중괄호가 필요합니다.

답변

모르는 경우 태그에 {{color: 'red'}}사용되는 이유style

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

React 공식 문서 에 따르면 style 속성은 CSS 문자열이 아닌 JavaScript 객체를 허용 합니다.

답변

React는 JSX를 사용하고, JSX에서는 모든 변수, 상태 객체, 표현식 등을 {}로 묶어야합니다.

JSX에서 인라인 스타일을 제공하는 동안 객체로 지정해야하므로 다시 중괄호 안에 있어야합니다. {}.

이것이 두 쌍의 중괄호가있는 이유입니다.

답변

이는 의도 한 스타일 속성의 개체로 설정된 스타일 변수를 선언하는 대신 개체에서 스타일 속성을 설정할 수 있음을 의미합니다. 더 많은 스타일이 필요한 요소는 스타일 변수를 선언하는 것이 더 깔끔합니다.

예를 들어 스타일 속성이 적은 요소의 경우 다음을 수행하십시오.

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

더 많은 스타일 속성을 가진 HTML 요소의 경우 다음을 수행하십시오.

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

그런 다음 jsx 구문으로 호출합니다.

<span style={spanStyle}>
  {this.props.product.name}
</span>

답변

모든 사람이 이해할 수 있도록 간단한 말로 말하려고합니다. 아래 코드 :

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

동일하다

<span
     dangerouslySetInnerHTML={ {__html: rawMarkup} }
/>

따라서 리터럴 객체 를 속성 에 할당하려면 React 표현식을 사용해야 합니다.

주로 AngularJs에서 ReactJs로 이동하는 일부 사람들에게는 AngularJs의 표현식 바인딩 연산자 {{}} 와 혼동 될 수 있습니다. 따라서 ReactJs에서 다르게 살펴보십시오.

답변

이중 중괄호에 대한 나의 해석은 스타일 개체가 JavaScript 개체 만 허용하므로 개체가 단일 중괄호 안에 있어야한다는 것입니다.

style={jsObj}

스타일 아티팩트의 객체는 키 : 값 쌍 (사전 대 배열)이며 해당 객체는 예를 들어 {color:'#ffffff'}.

그래서 당신은 :

style = { jsObj }

과

jsObj = {color:'#ffffff'}

대수에서와 마찬가지로 대체 할 때 다음을 의미합니다.

style = { {color:'#ffffff'} }