Reactで要素を動的に追加、削除する方法は何ですか？

2年 ago
海斗, 葵
1 minute

Reactでは、状態を使って要素を動的に追加や削除することができます。

コンポーネント内で要素を動的に追加するためには、状態として配列を定義し、setStateメソッドを使用して配列を更新する必要があります。例えば、リストアイテムを動的に追加する必要があるコンポーネントがあるとします。

import React, { useState } from 'react';

function MyComponent() {
  const [list, setList] = useState([]);

  const addItem = () => {
    setList([...list, 'New Item']);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

上記のコードでは、listは状態配列であり、addItem関数はボタンをクリックするとlist配列に新しい項目を追加するために使用されます。レンダリング部分では、list配列をマップメソッドを使用してリスト項目を生成します。

要動態刪除元素，您可以使用filter方法來過濾需要刪除的元素。例如，假設有一個組件需要動態刪除一個列表項目：

import React, { useState } from 'react';

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

  const removeItem = (index) => {
    setList(list.filter((item, i) => i !== index));
  };

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

上記のコードでは、removeItem関数はインデックスパラメータを受け取り、filterメソッドを使用して該当するインデックスの項目をフィルタリングし、リスト配列を更新します。レンダリングの部分では、各リスト項目の後ろに削除ボタンがあり、ボタンをクリックするとremoveItem関数が呼び出され、対応するインデックスが渡されます。

bannerAds