React中动态表单元素标签与ID管理：确保语义化与可访问性

// InputField.jsx
import React from 'react';

/**
 * 可复用的表单输入字段组件
 * @param {object} props
 * @param {string} props.id - 输入框的唯一ID，同时用于label的htmlFor属性
 * @param {string} props.labelText - label显示的文本
 * @param {string} [props.type='text'] - 输入框类型
 * @param {object} [props.rest] - 其他传递给input元素的属性
 */
const InputField = ({ id, labelText, type = 'text', ...rest }) => {
    return (
        <div>
            <label htmlFor={id}>{labelText}: </label>
            <input type={type} id={id} {...rest} />
        </div>
    );
};

export default InputField;

// CardEditor.jsx
import React from 'react';
import InputField from './InputField'; // 假设InputField在同一目录下

function CardEditor() {
    return (
        <form>
            <InputField id="card-title-1" labelText="卡片标题一" />
            <InputField id="card-description-1" labelText="卡片描述一" />
            <InputField id="card-title-2" labelText="卡片标题二" />
            <InputField id="card-description-2" labelText="卡片描述二" />
            <button type="submit">保存</button>
        </form>
    );
}

export default CardEditor;

// utils/idGenerator.js
/**
 * 生成一个简单的随机字符串作为唯一ID
 * 注意：Math.random()在极端情况下可能存在碰撞，
 * 生产环境可考虑使用更专业的UUID库，如'uuid'包。
 */
const generateUniqueId = () => Math.random().toString(36).substring(2, 9);

export default generateUniqueId;

// InputField.jsx
import React, { useState } from 'react';
import generateUniqueId from './utils/idGenerator'; // 导入ID生成函数

const InputField = ({ labelText, type = 'text', ...rest }) => {
    // 使用useState钩子在组件首次渲染时生成并保存唯一ID
    // 确保ID在组件的整个生命周期内保持稳定
    const [id] = useState(() => generateUniqueId());

    return (
        <div>
            <label htmlFor={id}>{labelText}: </label>
            <input type={type} id={id} {...rest} />
        </div>
    );
};

export default InputField;

// CardEditor.jsx
import React from 'react';
import InputField from './InputField'; // 假设InputField在同一目录下

function CardEditor() {
    return (
        <form>
            <InputField labelText="卡片标题" />
            <InputField labelText="卡片描述" />
            <InputField labelText="发布日期" type="date" />
            <button type="submit">保存</button>
        </form>
    );
}

export default CardEditor;