使用React在深度嵌套列表中交替设置项目样式

import React, { useState } from 'react';

const NestedList = () => {
  const [isAlternate, setIsAlternate] = useState(false);

  const toggleAlternate = () => {
    setIsAlternate(!isAlternate);
  };

  const renderList = (items) => {
    return items.map((item, index) => (
      <div
        key={index}
        style={{
          background: isAlternate && index % 2 === 0 ? 'lightgray' : 'white',
        }}
      >
        {item.name}
        {item.children && renderList(item.children)}
      </div>
    ));
  };

  const data = [
    {
      name: 'Item 1',
      children: [
        {
          name: 'Item 1.1',
          children: [
            {
              name: 'Item 1.1.1',
            },
            {
              name: 'Item 1.1.2',
            },
          ],
        },
        {
          name: 'Item 1.2',
        },
      ],
    },
    {
      name: 'Item 2',
      children: [
        {
          name: 'Item 2.1',
        },
        {
          name: 'Item 2.2',
        },
      ],
    },
  ];

  return (
    <div>
      <button onClick={toggleAlternate}>Toggle Alternate</button>
      {renderList(data)}
    </div>
  );
};

export default NestedList;