react，使用上下键实现行切换

在React中使用上下键实现行切换可以通过以下步骤实现：

1. 在组件中添加一个state属性，用于存储当前选中的行的索引值。

2. 监听键盘事件，当用户按下上下键时，修改state中选中行的索引值。

3. 在渲染组件时，使用map方法遍历数据源，根据state中选中行的索引值为相应的行添加一个选中样式。

下面是一个简单的示例代码：

import React, { useState } from 'react';

const data = ['行1', '行2', '行3', '行4'];

function App() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleKeyDown = e => {
    if (e.keyCode === 38 && selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1);
    } else if (e.keyCode === 40 && selectedIndex < data.length - 1) {
      setSelectedIndex(selectedIndex + 1);
    }
  };

  return (
    <div onKeyDown={handleKeyDown}>
      {data.map((item, index) => (
        <div
          key={index}
          style={{
            padding: '10px',
            backgroundColor: selectedIndex === index ? 'yellow' : 'white'
          }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

export default App;

在上面的代码中，我们首先定义了一个数据源 `data`，用于存储需要展示的行数据。然后在组件中使用 `useState` 定义了一个 `selectedIndex` 状态，用于存储当前选中的行的索引值。

在渲染组件时，我们使用map方法遍历数据源，为每一行添加一个选中样式。其中选中样式的条件是当前行的索引值与state中存储的选中行的索引值相等。同时，我们还在组件上监听了 `onKeyDown` 事件，当用户按下上下键时，修改state中选中行的索引值，并重新渲染组件。