反应JS | 列表

反应JS是一个用于构建用户界面的JavaScript库。在React中，列表是一种常见的UI元素，本篇文章将介绍如何使用React创建和呈现列表。

创建列表

React中使用map函数创建列表，可以将数组中的每个元素映射为一个React元素。

function List(props) {
  const items = props.items.map((item) =>
    <li key={item.id}>
      {item.text}
    </li>
  );
  return (
    <ul>
      {items}
    </ul>
  );
}

解释：

• List组件接收一个items数组作为props。
• map函数遍历items数组中的每个元素，并返回一个新的数组，其中包含每个元素的React元素。
• 每个React元素都是一个<li>元素，包含唯一的key属性和该元素所代表的文本内容。
• List组件返回一个包含所有React元素的<ul>元素。

使用列表

要使用List组件，只需将items数组传递给它即可。

const items = [
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  {id: 3, text: 'Item 3'}
];

function App() {
  return (
    <div>
      <h1>My List</h1>
      <List items={items} />
    </div>
  );
}

解释：

• App组件包含一个标题和一个List组件。
• items数组包含三个对象，每个对象都有一个id和一个text属性。
• items数组作为items属性传递给List组件。

使用状态更新列表

React中的状态可用于更新UI。以下示例演示如何使用状态来添加和删除列表项。

function List(props) {
  const [items, setItems] = React.useState(props.items);

  function addItem() {
    const text = prompt('Enter a new item:');
    if (text) {
      setItems([...items, {id: items.length + 1, text}]);
    }
  }

  function removeItem(id) {
    setItems(items.filter(item => item.id !== id));
  }

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.text}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

解释：

• List组件使用useState钩子来管理items数组的状态。
• addItem函数打开一个prompt对话框，要求用户输入一个新的列表项。如果有文本输入，则向items数组添加一个新对象，并使用setItems函数更新状态。
• removeItem函数使用filter函数从items数组中删除一个对象，并使用setItems函数更新状态。
• List组件返回一个包含Add Item按钮和所有列表项的<ul>元素。每个列表项都有一个Remove按钮，用于将该项从列表中删除。

结论

使用React创建列表非常简单，只需使用map函数即可。可以通过使用状态来动态添加和删除列表项。希望这篇文章对React开发人员有所帮助！