React内でテーブルに動的に列を追加の方法

1年 ago
海斗, 葵
1 minute

Reactで動的にテーブルの列を追加するには、次の手順を実行します。

  1. コンポーネントの State に配列を定義し、テーブルのカラムのデータを格納します。
  2. map 関数を使用すると、配列内の各要素について、表の列を作成できます。
  3. 列の追加が必要な場合は、この配列を更新すると、コンポーネントの再描画がトリガーされます。

以下にサンプルコードを示します。

import React, { useState } from "react";

const Table = () => {
  const [columns, setColumns] = useState(["Column 1", "Column 2", "Column 3"]);

  const addColumn = () => {
    const newColumn = `Column ${columns.length + 1}`;
    setColumns([...columns, newColumn]);
  };

  return (
    <div>
      <button onClick={addColumn}>Add Column</button>
      <table>
        <thead>
          <tr>
            {columns.map((column, index) => (
              <th key={index}>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {/* 表格内容 */}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

この例では、”列の追加”ボタンをクリックすると「addColumn」関数がトリガーされ、これが「columns」配列の末尾に新しい列データを追加し、コンポーネントの状態を更新します。続いて「map」関数が「columns」配列を走査し、各要素に対して「

」要素を生成することで、テーブルの列を動的に生成します。

注意、このサンプルは列の動的追加のみを示します。テーブルの内容を動的に生成する必要がある場合は、具体的なニーズに応じて処理できます。

bannerAds