React に動的コンポーネントを追加する
どの React アプリケーションでも、動的要素を使用することは非常に一般的です。 動的要素の最も優れた機能は、ユーザーが変更を確認するために Web ページを更新する必要がないことです。
たとえば、複数の入力フィールドが必要な場合は、ボタンをクリックして新しい入力フィールドを簡単に作成できます。
この短い記事では、React JS に動的要素を含める方法を確認し、トピックを簡単にするために必要な例と説明を使用してトピックについて説明します。
React に動的コンポーネントを追加する
Web アプリケーションに動的要素を追加するには、以下のような基本コンポーネントを含む別の JS ファイルを作成する必要があります。
コード - App.js:
import react from 'react';
class DynamicComponent extends react.Component {
constructor() {
super() {
this.state = { addNew: [{}] }
}
}
addLine() {
this.setState(({addNew: [...this.state.addNew, {}]}))
}
render() {
return(
<div>
<center>
{this.state.addNew.map(()=>(
<h2>This is a dynamic text</h2>
))}
<button onClick={()=>this.addLine()}>Add new</button>
</center>
</div>
)
}
}
export default DynamicComponent;
最初に、上記のサンプル ファイルでアプリケーションに必要なファイルとパッケージをインポートしました。 次に、react.Component に拡張するクラスを作成します。
それでは、クラス構造の重要な部分について説明しましょう。 まず、クラス constructor() には super() が含まれており、ここで統計の配列を定義します。
各要素を開始する addLine() という名前の関数。 最後に、ユーザー インターフェイス全体を整理する render() 関数があります。この関数内で、状態をマップし、動的に実装する必要があるコードを定義する map() を作成しました。
その後、ボタン要素を作成し、関数の onclick イベントは addLine() です。
index.js ファイルを見てみましょう。このファイルには次のような変更が必要です。
コード - index.js:
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import DynamicComponent from './component';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<DynamicComponent />
</React.StrictMode>
);
reportWebVitals();
上記の JS ファイルに JS ファイルをインポートした後、クラスを渡しました。 上記の例を実行すると、コンソールに以下の出力が表示されます。
出力：
この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 React プロジェクトを実行するには、システムに Node JS の最新バージョンが含まれている必要があります。
Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.
LinkedIn