Sửa lỗi cảnh báo 'Style Prop Expects a Mapping' trong React

Tại sao cảnh báo này xuất hiện?

Có thể bạn đã sao chép một đoạn mã HTML thuần vào component React của mình và thấy một loạt văn bản màu đỏ trong console trình duyệt. Cảnh báo trông như thế này:

Warning: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{color: 'red'}} when using JSX.

Nguyên nhân thường là do một chuỗi style HTML tiêu chuẩn hoặc một template literal. React từ chối áp dụng các style này vì nó không muốn phân tích cú pháp (parse) các chuỗi thô mỗi khi component cập nhật. Thay vào đó, nó yêu cầu một đối tượng JavaScript có cấu trúc.

Lý do kỹ thuật

Trong phát triển web truyền thống, thuộc tính style chỉ là một chuỗi. Trình duyệt phân tích chuỗi đó thành một mô hình CSS. Tuy nhiên, React sử dụng DOM ảo (virtual DOM). Bằng cách yêu cầu một đối tượng, React có thể cập nhật chính xác chỉ những thuộc tính cụ thể đã thay đổi (như đổi opacity từ 0 thành 1) mà không cần tính toán lại toàn bộ chuỗi style. Điều này nhanh hơn đáng kể đối với các giao diện phức tạp có hàng trăm phần tử.

Cách khắc phục lỗi

1. Cú pháp hai dấu ngoặc nhọn

Cách khắc phục nhanh nhất là bao bọc style của bạn trong {{ }}. Những người mới bắt đầu thường thấy điều này khó hiểu, nhưng nó rất đơn giản: cặp ngoặc bên ngoài báo cho JSX biết bạn đang viết JavaScript, và cặp ngoặc bên trong tạo ra một đối tượng literal.

Cách làm sai:

// Điều này sẽ kích hoạt cảnh báo trong console
<div style="color: blue; font-size: 20px;">Cú pháp không hợp lệ</div>

Cách làm đúng trong React:

// Đây là JSX hợp lệ
<div style={{ color: 'blue', fontSize: '20px' }}>Cú pháp đúng</div>

2. Chuyển sang camelCase

CSS tiêu chuẩn sử dụng dấu gạch ngang (kebab-case), nhưng các đối tượng JavaScript sử dụng camelCase. Nếu bạn cố gắng sử dụng background-color làm key trong một đối tượng JS mà không có dấu ngoặc kép, JavaScript sẽ nghĩ rằng bạn đang cố gắng lấy biến background trừ đi biến color.

text-align trở thành textAlign
margin-bottom trở thành marginBottom
z-index trở thành zIndex

// Sửa lại tên các thuộc tính
<button style={{ backgroundColor: '#f00', fontWeight: 'bold' }}>Gửi</button>

3. Ngừng sử dụng Template Literals

Nếu bạn chuyển từ Vue hoặc Alpine.js sang, bạn có thể thử chèn biến vào chuỗi style bằng dấu backtick. Trong React, đây là một sai lầm. Luôn truyền giá trị động trực tiếp vào đối tượng.

Sai:

const themeColor = 'green';
<div style={`color: ${themeColor};`} /> // Vẫn là một chuỗi, vẫn bị lỗi

Đúng:

const themeColor = 'green';
<div style={{ color: themeColor }} />

4. Làm sạch tài nguyên SVG

Các công cụ thiết kế như Figma thường xuất SVG với các chuỗi style được mã hóa cứng. Nếu bạn dán một thẻ path SVG dài 50 dòng trực tiếp vào React, mọi thuộc tính style="..." sẽ làm hỏng bản build của bạn. Hãy sử dụng một công cụ như SVG to JSX để tự động chuyển đổi các thuộc tính này thành các đối tượng tương thích với React.

Cách kiểm tra việc khắc phục

Nhấn F12 để mở Developer Tools.
Kiểm tra tab Console. Cảnh báo sẽ không còn xuất hiện khi tải trang.
Chuyển sang tab Elements. Bạn sẽ nhận thấy React đã chuyển đổi đối tượng của bạn trở lại thành một chuỗi để trình duyệt đọc, ví dụ như style="font-size: 20px;".

Phòng ngừa và các thực hành tốt nhất

Sử dụng TypeScript để nhận phản hồi tức thì

TypeScript là người bạn tốt nhất của bạn ở đây. Nó sẽ gạch chân lỗi bằng màu đỏ ngay cả trước khi bạn lưu tệp. Nó biết rằng thuộc tính style phải khớp với interface React.CSSProperties.

// Lỗi TS: Kiểu 'string' không thể gán cho kiểu 'CSSProperties'
<div style="display: flex" />

Di chuyển các đối tượng style lớn ra ngoài

Nếu đối tượng style của bạn có hơn 5-10 thuộc tính, hãy di chuyển nó ra ngoài câu lệnh return. Điều này giúp JSX của bạn dễ đọc hơn và ngăn đối tượng bị cấp phát lại trong bộ nhớ sau mỗi chu kỳ render.

const containerStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '100vh',
  backgroundColor: '#fafafa'
};

function Layout() {
  return <div style={containerStyle}>Nội dung căn giữa</div>;
}

Việc chuyển đổi chuỗi thành đối tượng lúc đầu có vẻ tẻ nhạt. Tuy nhiên, một khi bạn đã quen với cách tiếp cận dựa trên đối tượng, bạn sẽ thấy việc thay đổi style theo lập trình dựa trên state của component dễ dàng hơn nhiều.