高亮显示ListView行，而不重新绑定或对该行应用样式

import React, { useState } from 'react';

const ListView = () => {
  const [data, setData] = useState([
    { id: 1, text: 'Item 1', isHighlighted: false },
    { id: 2, text: 'Item 2', isHighlighted: false },
    { id: 3, text: 'Item 3', isHighlighted: false },
  ]);

  const highlightRow = (id) => {
    const updatedData = data.map((item) => {
      if (item.id === id) {
        return { ...item, isHighlighted: true };
      }
      return item;
    });
    setData(updatedData);
  };

  return (
    <ul>
      {data.map((item) => (
        <li
          key={item.id}
          className={item.isHighlighted ? 'highlighted' : ''}
        >
          {item.text}
          <button onClick={() => highlightRow(item.id)}>Highlight</button>
        </li>
      ))}
    </ul>
  );
};

export default ListView;