React中如何操作数组映射生成的指定索引对应组件？

你不需要通过DOM反查组件props，直接在遍历渲染阶段就把当前项的索引绑定到对应事件回调中，配合状态管理就能精准定位、操作任意索引对应的Box组件，具体实现步骤如下：

• 第一步：新增选中状态管理
  在原有数值数组的状态旁，新增状态存储当前选中的组件索引，默认设为-1代表无选中项：

const [mynums,setMynums] = useState([7,1,3,12,25,2,5,0])
// 新增选中索引状态
const [selectedIndex, setSelectedIndex] = useState(-1)

• 第二步：改造Box组件，支持选中态和点击事件
  给Box组件新增选中状态的类名判断，以及点击事件的接收入口：

function Box(props){
    return(
        <span 
            x={props.xyz} 
            className={`box ${props.isSelected ? 'box-selected' : ''}`}
            onClick={props.onClick}
        >
            {props.data}
        </span>
    )
}

• 第三步：遍历时绑定索引到对应组件
  在map遍历生成Box列表时，把当前项的索引、选中判断逻辑、点击回调直接绑定到对应组件上，点击时就能直接拿到当前项的索引和数值，不需要额外查询：

let numsList = mynums.map( (item,index) =>{
    return (
        <Box 
            data={item} 
            key={index} 
            xyz={index}
            isSelected={selectedIndex === index}
            onClick={() => {
                // 点击时直接更新选中索引，精准定位当前组件
                setSelectedIndex(index)
                // 此处可直接拿到当前项的索引、数值，编写排序交换逻辑
                console.log('当前选中项索引：', index, '对应数值：', item)
            }}
        ></Box>
    )
})

• 第四步：添加选中态样式（可选）
  在CSS中定义选中状态的样式，方便直观看到选中的组件：

.box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 6px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}
.box-selected {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

实现说明 #

• 这种方式在渲染阶段就完成了组件和数组索引的绑定，后续做排序交换操作时，直接操作mynums数组对应索引的元素，调用setMynums更新数组后，所有Box会自动按照新的数组顺序重渲染
• 如果需要实现多选交换的逻辑，只需要把selectedIndex从存单个数字改成存索引数组即可，绑定逻辑不需要大改

注意：不要在遍历的时候直接写onClick={setSelectedIndex(index)}，这种写法会在组件渲染时直接触发状态更新，必须用箭头函数包裹一层，只在点击时才执行回调。

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