React组件渲染时如何用递增state变量设置className？

首先你对React组件状态的理解确实存在偏差：每个TimeInputCell组件实例的state是独立隔离的，所以你在子组件内部初始化startOrFinishCellCount为0，每个实例都会各自持有这个初始值，自然所有组件的className都会是timeInputCell0；如果尝试在子组件里用useEffect去更新这个状态（比如每次渲染加1），会触发组件重渲染，重渲染后又会执行useEffect更新状态，形成无限循环。

正确的做法是将计数逻辑提升到父组件，由父组件统一管理所有子组件的递增序号，再通过props传递给每个TimeInputCell实例。

修改后的子组件代码 #

import React, { useState } from 'react';
import './TimeUserInputTableData.css'

function TimeInputCell(props) {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <td rowSpan={props.rowSpan} colSpan={props.colSpan}>
      <input
        type="time"
        value={inputValue}
        onChange={handleInputChange}
        {/* 注意id必须唯一，避免多个实例共用同一个id */}
        id={`timeInputCell${props.cellNumber}`}
        className={`timeInputCell${props.cellNumber} h-100 w-100 d-flex justify-content-between align-items-center`}
      />
    </td>
  );
}

export default TimeInputCell;

父组件使用示例 #

如果是固定数量的组件渲染：

import React from 'react';
import TimeInputCell from './TimeInputCell';

function TimeInputTable() {
  // 假设需要渲染3个时间输入组件
  const totalCells = 3;

  return (
    <table>
      <tbody>
        {Array.from({ length: totalCells }, (_, idx) => (
          <tr key={idx}>
            <TimeInputCell 
              cellNumber={idx + 1} {/* 从1开始递增，也可以从0开始 */}
              rowSpan={1}
              colSpan={1}
            />
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default TimeInputTable;

如果是动态添加组件（比如用户点击按钮新增）：

import React, { useState } from 'react';
import TimeInputCell from './TimeInputCell';

function DynamicTimeInputTable() {
  // 用数组存储组件的序号标识，支持动态添加
  const [cellIds, setCellIds] = useState([1]);

  const addNewCell = () => {
    // 新增的序号是当前最大序号+1
    setCellIds(prev => [...prev, prev[prev.length - 1] + 1]);
  };

  return (
    <div>
      <button onClick={addNewCell}>添加时间输入框</button>
      <table>
        <tbody>
          {cellIds.map((id, idx) => (
            <tr key={idx}>
              <TimeInputCell 
                cellNumber={id}
                rowSpan={1}
                colSpan={1}
              />
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default DynamicTimeInputTable;

关键说明 #

1. 状态提升：父组件掌控所有子组件的唯一标识，确保每个实例的序号是递增且唯一的，避免子组件独立维护状态导致的不一致。
2. 唯一id：原代码中所有实例共用id='timeInputCell'是不符合HTML规范的，必须改为每个实例唯一的id，这里直接复用了传递的序号。

内容的提问来源于stack exchange，提问作者Brandon