Mục đích của dấu ngoặc nhọn kép trong cú pháp JSX của React là gì?

Từ hướng dẫn react.js, chúng ta thấy cách sử dụng dấu ngoặc nhọn kép này:

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

Và sau đó trong hướng dẫn thứ hai, "Suy nghĩ trong phản ứng" :

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

Tuy nhiên, tài liệu về React JSX không mô tả hoặc đề cập đến dấu ngoặc nhọn kép. Cú pháp này (cong kép) để làm gì? Và có cách nào khác để diễn đạt điều tương tự trong jsx hay đây chỉ là một thiếu sót trong tài liệu?

Nó chỉ là một đối tượng được gạch trong giá trị prop theo nghĩa đen. Nó giống như

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Niềng răng xoăn có 2 cách sử dụng đây: -

1. {..} đánh giá một biểu thức trong JSX.
2. {key: value} ngụ ý một đối tượng javascript.

Hãy xem một ví dụ đơn giản.

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

Nếu bạn quan sát picđược bao quanh bởi các mắc cài. Đó là cách nhúng biến JSX. piccó thể là bất kỳ biểu thức / biến / đối tượng Javascript nào. Bạn cũng có thể làm điều gì đó như {2 + 3} và nó sẽ đánh giá thành {5}

Hãy cùng mổ xẻ phong cách ở đây. {width: 193}là một đối tượng Javascript. Và để nhúng đối tượng này vào JSX, bạn cần dấu ngoặc nhọn, do đó,{ {width: 193} }

Lưu ý: Để nhúng bất kỳ loại biểu thức / biến / đối tượng Javascript nào vào JSX, bạn cần có dấu ngoặc nhọn.

Trong trường hợp bạn không biết, tại sao lại {{color: 'red'}}được sử dụng trong stylethẻ

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

Theo tài liệu chính thức của React , thuộc tính style chấp nhận một đối tượng JavaScript chứ không phải một chuỗi CSS.

React sử dụng JSX, Trong JSX, bất kỳ biến, đối tượng trạng thái, biểu thức nào, v.v. đều phải được đặt trong {}.

Trong khi đưa ra các kiểu nội tuyến trong JSX, nó phải được chỉ định là một đối tượng để nó phải nằm trong dấu ngoặc nhọn một lần nữa. {}.

Đây là lý do tại sao có hai cặp dấu ngoặc nhọn

điều này có nghĩa là thay vì khai báo một biến kiểu được đặt thành một đối tượng của các thuộc tính kiểu dự định, bạn có thể chỉ đặt các thuộc tính kiểu trong một đối tượng ... đây thường là phương pháp hay nhất khi các kiểu bạn muốn thêm rất ít. một phần tử cần nhiều kiểu hơn thì việc khai báo một biến kiểu sẽ rõ ràng hơn

ví dụ đối với một phần tử có ít thuộc tính kiểu hơn thì làm điều này

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

đối với phần tử HTML có nhiều thuộc tính kiểu hơn, hãy làm điều này

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

thì bạn gọi nó bằng cú pháp jsx

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

Tôi cố gắng kể nó bằng những từ đơn giản để mọi người dễ hiểu. Đoạn mã dưới đây:

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

bằng

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

Vì vậy, đơn giản là chúng ta nên sử dụng biểu thức React nếu chúng ta định gán một đối tượng theo nghĩa đen cho một thuộc tính.

Đối với một số người chủ yếu chuyển từ AngularJs sang ReactJs, có thể là do nhầm lẫn với toán tử ràng buộc biểu thức của AngularJs {{}} . Vì vậy, hãy thử nhìn nó theo cách khác trong ReactJs.

Cách hiểu của tôi về dấu ngoặc nhọn kép là đối tượng kiểu chỉ chấp nhận một đối tượng JavaScript, vì vậy đối tượng phải nằm bên trong dấu ngoặc nhọn đơn.

style={jsObj}

Đối tượng cho tạo tác kiểu có khóa: các cặp giá trị (từ điển so với một mảng) và đối tượng đó được biểu thị, ví dụ: {color:'#ffffff'} .

Vì vậy, bạn đã có:

style = { jsObj }

và

jsObj = {color:'#ffffff'}

Cũng giống như trong đại số, khi bạn thay thế, nó có nghĩa là:

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