javascript - Vad är syftet med dubbla måsvingeparenteser i Reacts JSX-syntax?

Från react.js-handledningen ser vi denna användning av dubbla måsvingar:

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

Och sedan i den andra handledningen, "Thinking in React":

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

Men React JSX-dokumentationen beskriver eller nämner inte dubbla måsvingar. Vad är detta syntax (dubbla måsvingar) till för? Och finns det ett annat sätt att uttrycka samma sak i JSX eller är detta bara en utelämning från dokumentationen?

Svar #1

Det är bara ett objektbokstav inbäddat i prop-värdet. Det är samma som

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Svar #2

Klamrar har två användningar här:-

  1. { .. } utvärderas till ett uttryck i JSX.
  2. { key: value } innebär ett JavaScript-objekt.

Låt oss se ett enkelt exempel.

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

Om du observerar är pic omgiven av klamrar. Det är JSX-sättet att bädda in en variabel. pic kan vara vilken JavaScript-uttryck/variabel/objekt som helst. Du kan också göra något som { 2+3 } och det kommer att utvärderas till { 5 }

Låt oss dissekera stil här. {width: 193} är ett Javascript-objekt. Och för att bädda in detta objekt i JSX behöver du måsvingar, alltså { {width: 193} }

Obs: För att bädda in någon typ av Javascript-uttryck/variabel/objekt i JSX behöver du måsvingar.

Svar #3

Syntaxen för {{color: 'red'}} används i style-taggen eftersom enligt React-dokumentationen accepterar style-attributet ett JavaScript-objekt med camelCase-egenskaper istället för en CSS-sträng.

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

Relaterade artiklar