Skip to main content

Định dạng JSX

Quy ước căn lề, dấu ngoặc, khoảng trắng và thẻ JSX (theo React/JSX Style Guide).

Căn lề (Alignment)​

Props nhiều dòng: mỗi prop một dòng, thẻ đóng dòng mới​

Khi component có nhiều prop và không gọn trên một dòng: mỗi prop xuống dòng, thẻ đóng /> hoặc > đặt ở dòng mới. Nếu props vừa một dòng thì giữ trên cùng dòng.

// ❌ Tránh
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

// ✅ Tốt
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// ✅ Tốt: props vừa một dòng
<Foo bar="bar" />

Children thụt lề bình thường​

Khi component có children, phần children thụt lề theo block bình thường.

// ✅ Tốt
<Foo superLongParam="bar" anotherSuperLongParam="baz">
  <Quux />
</Foo>

Điều kiện + JSX: bọc trong ngoặc đơn​

Khi dùng điều kiện kèm JSX nhiều dòng, bọc JSX trong ngoặc đơn () để rõ ràng.

// ❌ Tránh
{
  showButton && <Button />;
}

// ❌ Tránh
{
  showButton && <Button />;
}

// ✅ Tốt
{
  showButton && <Button />;
}

// ✅ Tốt: một dòng thì không bắt buộc
{
  showButton && <Button />;
}

Ternary nhiều dòng​

Ternary với JSX nhiều dòng: mỗi nhánh bọc trong ngoặc đơn, xuống dòng rõ ràng.

// ✅ Tốt
{
  someConditional ? (
    <Foo />
  ) : (
    <Foo superLongParam="bar" anotherSuperLongParam="baz" />
  );
}

Dấu ngoặc (Quotes)​

Thuộc tính JSX: dấu ngoặc kép; JS/TS: ngoặc đơn​

  • Thuộc tính JSX (attribute): dùng dấu ngoặc kép ".
  • Chuỗi trong JS/TS (bên ngoài JSX): dùng dấu ngoặc đơn ' theo convention chung.
// ❌ Tránh
<Foo bar='bar' />

// ✅ Tốt
<Foo bar="bar" />

// ❌ Tránh: trong JS nên dùng single quote
<Foo style={{ left: "20px" }} />

// ✅ Tốt
<Foo style={{ left: '20px' }} />

Khoảng trắng (Spacing)​

Thẻ self-close: có một khoảng trắng trước />​

Thẻ không có children phải self-close và có một dấu cách trước />.

// ❌ Tránh
<Foo/>

// very bad
<Foo                 />

// ❌ Tránh
<Foo
 />

// ✅ Tốt
<Foo />

Không thêm khoảng trắng trong cặp ngoặc nhọn JSX​

Trong { ... } của JSX không chèn khoảng trắng thừa quanh biểu thức.

// ❌ Tránh
<Foo bar={ baz } />

// ✅ Tốt
<Foo bar={baz} />

Ngoặc đơn (Parentheses)​

JSX nhiều dòng: bọc trong ngoặc đơn​

Khi JSX trải nhiều dòng, bọc toàn bộ trong ngoặc đơn ().

// ❌ Tránh
function MyComponent() {
  return (
    <MyComponent variant="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}

// ✅ Tốt
function MyComponent() {
  return (
    <MyComponent variant="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}

// ✅ Tốt: một dòng không bắt buộc
function MyComponent() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

Thẻ (Tags)​

Thẻ không có children: self-close​

Thẻ/component không có children phải dùng dạng self-close <Foo />, không dùng <Foo></Foo>.

// ❌ Tránh
<Foo variant="stuff"></Foo>

// ✅ Tốt
<Foo variant="stuff" />

Props nhiều dòng: đóng thẻ trên dòng mới​

Khi component có props xuống nhiều dòng, đặt /> hoặc > ở dòng mới.

// ❌ Tránh
<Foo
  bar="bar"
  baz="baz" />

// ✅ Tốt
<Foo
  bar="bar"
  baz="baz"
/>