import { Meta } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional/Functions/getIndexForRender - Tạo khóa cho Render'/>

# `getIndexForRender`

Một hàm tiện ích dùng để tạo một `key` duy nhất cho thành phần. Key được hình thành theo phương thức **cộng dồn (additive)**: tất cả các phần được xác định (bao gồm cả tên thành phần) được nối với nhau bằng dấu chấm.

### Tham số:
- `name: string | any` — Tên hoặc thẻ của thành phần (phần cơ sở của key).
- `props?: T` — Các thuộc tính của thành phần (dùng để trích xuất `index`, `class` và `id`).
- `index?: string` — Một chỉ số bên ngoài tùy chọn.

### Trả về:
`string | undefined` — Khóa tổng hợp đã được tạo, hoặc `undefined` nếu không thể tạo khóa.

### Ví dụ tạo key:

```typescript
import { getIndexForRender } from '@dxtmisha/functional'

// 1. Chỉ có tên
getIndexForRender('li') 
// => '.li'

// 2. Tên + chỉ số bên ngoài
getIndexForRender('div', {}, 'row-1') 
// => '.div.row-1'

// 3. Tên + chỉ số từ props + lớp + id
getIndexForRender('button', { 
  index: 'primary', 
  class: 'btn-large', 
  id: 'submit-01' 
}) 
// => '.button.primary.btn-large.submit-01'

// 4. Đầy đủ các thành phần (đối số bên ngoài + mọi thứ từ props)
getIndexForRender('span', { 
  index: 'p-idx', 
  class: 'text-red', 
  id: 'id-99' 
}, 'arg-idx') 
// => '.span.arg-idx.p-idx.text-red.id-99'

// 5. Trường hợp trống
getIndexForRender(undefined)
// => undefined
```

### Logic lắp ghép key

Key được lắp ghép theo chuỗi:
1.  **`.name`** (nếu `name` là một chuỗi)
2.  `+ .index` (nếu đối số `index` được truyền vào)
3.  `+ .props.index` (nếu có trong thuộc tính và là một chuỗi)
4.  `+ .className` (nếu có trong thuộc tính)
5.  `+ .props.id` (nếu có trong thuộc tính)
