如何从React UL中删除HTML /LI

从React UL中删除HTML /LI可以通过以下步骤实现：

首先，确保你已经安装了React和相关的依赖。
在你的React组件中，创建一个状态变量来存储UL的列表项。例如，可以使用useState钩子来创建一个名为listItems的状态变量：

import React, { useState } from 'react';

function MyComponent() {
  const [listItems, setListItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  // 其他组件代码...

  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

现在，你可以在组件中添加一个删除列表项的函数。这个函数将接收要删除的列表项的索引作为参数，并更新listItems状态变量。使用splice方法从数组中删除指定索引的元素：

import React, { useState } from 'react';

function MyComponent() {
  const [listItems, setListItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const deleteListItem = (index) => {
    const updatedListItems = [...listItems];
    updatedListItems.splice(index, 1);
    setListItems(updatedListItems);
  };

  // 其他组件代码...

  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={() => deleteListItem(index)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

export default MyComponent;