로부터 튜토리얼 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} />dangerouslySetInnerHTML={__html: rawMarkup}대신에 그것을 만드는 생각이 무엇인지 알고 dangerouslySetInnerHTML={rawMarkup}있습니까? 객체 {__html: rawMarkup}가 변경 가능하고 문자열이 아니기 때문입니까?
중괄호는 여기에 두 가지 용도가 있습니다.
간단한 예를 보겠습니다.
<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 객체를 허용 합니다.
이는 의도 한 스타일 속성의 개체로 설정된 스타일 변수를 선언하는 대신 개체에서 스타일 속성을 설정할 수 있음을 의미합니다. 더 많은 스타일이 필요한 요소는 스타일 변수를 선언하는 것이 더 깔끔합니다.
예를 들어 스타일 속성이 적은 요소의 경우 다음을 수행하십시오.
<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에서 다르게 살펴보십시오.
The exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.