React の動的テーブル | プログラミングチュートリアル

はじめに

この実験では、プリミティブ型の配列から作成された行を持つテーブルを React を使って動的にレンダリングする方法を探ります。具体的には、Array.prototype.map() メソッドを利用して、データ配列の各項目を適切なキー付きの <tr> 要素にマッピングし、ID と値の 2 つの列を持つテーブルに表示します。この実験が終了するとき、React を使って動的で応答性の高いテーブルを作成する方法をより深く理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

データテーブル

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

ID と Value の 2 つの列を持つテーブル要素を作成し、各行をプリミティブ値の配列から動的に生成します。

これを達成するには、Array.prototype.map() メソッドを使って、入力 data 配列の各項目を適切な key 付きの <tr> 要素として表す新しい JSX 要素の配列を作成します。各 <tr> 内に、行のインデックスと値をそれぞれ表示する 2 つの <td> 要素を追加します。

以下は例となる実装です：

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

たとえば、人の名前の配列でこのコンポーネントを使う場合、次のように呼び出すことができます：

const people = ["John", "Jesse"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <DataTable data={people} />
);

右下隅の「Go Live」をクリックして 8080 ポートでウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはデータテーブルの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

プリミティブデータを使った React の動的テーブル

はじめに

データテーブル

まとめ