Niềng răng xoăn có ý nghĩa gì trong JSX (React)?

Question

Đối với một ví dụ, để thiết lập một phong cách phản ứng bạn có thể làm

var css = {color: red}

và

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

Tại sao bạn cần các dấu ngoặc nhọn xung quanh css trong đoạn mã thứ hai?

Answer 1

Bạn đặt dấu ngoặc nhọn khi bạn muốn sử dụng giá trị của biến trong "html" (bên trong phần hiển thị). Nó chỉ là một cách để nói cho các ứng dụng để có giá trị của biến và đặt nó ở đó, như trái ngược với một từ.

Answer 2

Dấu ngoặc nhọn là một cú pháp đặc biệt để cho trình phân tích cú pháp JSX biết rằng nó cần phải diễn giải nội dung ở giữa chúng dưới dạng JavaScript thay vì một chuỗi.

Bạn cần chúng khi bạn muốn sử dụng biểu thức JavaScript như biến hoặc tham chiếu bên trong JSX. Bởi vì nếu bạn sử dụng cú pháp nháy kép tiêu chuẩn như vậy:

var css = { color: red }

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

JSX không biết bạn có nghĩa là sử dụng biến css trong thuộc tính phong cách thay vì chuỗi. Và bằng cách đặt các dấu ngoặc nhọn xung quanh biến css, bạn đang yêu cầu trình phân tích cú pháp "lấy nội dung của biến số css và đặt chúng ở đây". (Về mặt kỹ thuật, nó đánh giá nội dung)

Quá trình này thường được gọi là "nội suy".

Answer 3

Nếu bạn không sử dụng biến css, các JSX có thể trông như thế này:

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

Tôi đoán bạn đang bối rối về các dấu ngoặc nhọn đôi.

để bạn biết rằng các dấu ngoặc nhọn trong JSX có nghĩa là processing in a JavaScript way, vì vậy các dấu ngoặc ngoài được sử dụng chính xác cho mục đích này.

Nhưng thuộc tính style chấp nhận object. Và một vật cũng cần một cặp dấu ngoặc nhọn khác để bọc nó lại. Đó là mục đích cho những người bên trong.