如何为React嵌套组件中的输入框添加递增的data-inputnumber属性？

当然可以实现，核心是统一控制所有输入框的编号序列，让每个Wrapper组件从父组件拿到自己的起始编号，内部输入框基于这个起始值加上自身索引生成最终编号。下面分两种场景给出实现方案：

场景1：输入框数量固定（提前已知） #

如果每个Wrapper里的输入框数量是确定的，可以提前计算好每个Wrapper的起始编号，直接传递给子组件：

App组件代码 #

function App() {
  // 定义每个Wrapper对应的输入框数量
  const inputCounts = [2, 3, 2, 4];
  // 计算每个Wrapper的起始编号
  const startNumbers = [];
  let currentStart = 0;
  
  for (const count of inputCounts) {
    startNumbers.push(currentStart);
    currentStart += count;
  }

  return (
    <>
      {inputCounts.map((count, index) => (
        <Wrapper 
          key={index} 
          startNumber={startNumbers[index]} 
          inputCount={count} 
        />
      ))}
    </>
  );
}

Wrapper组件代码 #

const Wrapper = ({ startNumber, inputCount }) => {
  return (
    <div>
      {Array.from({ length: inputCount }).map((_, idx) => (
        <input 
          key={idx} 
          data-inputnumber={startNumber + idx} 
        />
      ))}
    </div>
  );
};

场景2：输入框数量动态变化 #

如果Wrapper里的输入框数量会动态增减（比如通过按钮添加/删除），需要通过回调让子组件把当前输入数量通知给父组件，父组件实时更新后续Wrapper的起始编号：

App组件代码 #

import { useState } from 'react';

function App() {
  // 存储每个Wrapper的实时输入数量
  const [wrapperInputCounts, setWrapperInputCounts] = useState([]);
  // 假设页面上有4个Wrapper，可根据实际情况调整
  const wrapperTotal = 4;

  // 处理子组件传递的输入数量变化
  const updateWrapperCount = (index, count) => {
    const newCounts = [...wrapperInputCounts];
    newCounts[index] = count;
    setWrapperInputCounts(newCounts);
  };

  // 计算每个Wrapper的起始编号
  const getStartNumbers = () => {
    const starts = [];
    let current = 0;
    for (const count of wrapperInputCounts) {
      starts.push(current);
      current += count || 0;
    }
    return starts;
  };

  const startNumbers = getStartNumbers();

  return (
    <>
      {Array.from({ length: wrapperTotal }).map((_, index) => (
        <Wrapper
          key={index}
          startNumber={startNumbers[index] || 0}
          onCountChange={(count) => updateWrapperCount(index, count)}
        />
      ))}
    </>
  );
}

Wrapper组件代码 #

import { useState, useEffect } from 'react';

const Wrapper = ({ startNumber, onCountChange }) => {
  // 内部维护输入框数量状态
  const [inputCount, setInputCount] = useState(2);

  // 输入数量变化时通知父组件
  useEffect(() => {
    onCountChange(inputCount);
  }, [inputCount, onCountChange]);

  // 添加输入框的示例方法
  const addInput = () => {
    setInputCount(prev => prev + 1);
  };

  return (
    <div>
      {Array.from({ length: inputCount }).map((_, idx) => (
        <input 
          key={idx} 
          data-inputnumber={startNumber + idx} 
        />
      ))}
      <button onClick={addInput}>添加输入框</button>
    </div>
  );
};

两种方案都能实现你期望的连续递增编号效果，第一种更适合静态场景，第二种适配动态变化的输入列表。

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