React本机更改列表中项目的视图背景颜色

import React, { useState } from 'react';

const ListItem = ({ text }) => {
  const [backgroundColor, setBackgroundColor] = useState('white');

  const changeBackgroundColor = () => {
    setBackgroundColor('yellow'); // 通过修改状态变量来更改背景颜色
  };

  return (
    <div style={{ backgroundColor }}>
      <p>{text}</p>
      <button onClick={changeBackgroundColor}>Change Color</button>
    </div>
  );
};

export default ListItem;

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

const List = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      {items.map((item, index) => (
        <ListItem key={index} text={item} />
      ))}
    </div>
  );
};

export default List;