Dynamische Komponenten in React hinzufügen

Für jede React-Anwendung ist es üblich, dynamische Elemente zu verwenden. Das aufregendste Merkmal dynamischer Elemente ist, dass der Benutzer die Webseite nicht aktualisieren muss, um Änderungen zu sehen.

Benötigen Sie beispielsweise mehr als ein Eingabefeld, können Sie ganz einfach per Knopfdruck ein neues Eingabefeld erstellen.

In diesem kurzen Artikel werden wir sehen, wie wir dynamische Elemente in React JS integrieren können, und wir werden das Thema diskutieren, indem wir die notwendigen Beispiele und Erklärungen verwenden, um das Thema zu vereinfachen.

Dynamische Komponenten in React hinzufügen

Um dynamische Elemente für eine Webanwendung hinzuzufügen, müssen wir eine separate JS-Datei mit den grundlegenden Komponenten wie den folgenden erstellen:

Code - 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;

Wir haben zunächst die notwendigen Dateien und Pakete für unsere Anwendung in die obige Beispieldatei importiert. Dann erstellen wir eine Klasse, die sich auf react.Component erstreckt.

Lassen Sie uns nun die wichtigen Teile der Klassenstruktur besprechen. Zuerst enthält die Klasse constructor() das super(), wo wir das Array von Statistiken definieren.

Die eine Funktion namens addLine(), die jedes Element initiiert. Schließlich haben wir die Funktion render(), die die gesamte Benutzeroberfläche organisiert, und innerhalb dieser Funktion haben wir eine map() erstellt, um den Zustand abzubilden und den Code zu definieren, der dynamisch implementiert werden muss.

Danach erstellen wir ein Button-Element und das onclick-Event der Funktion ist addLine().

Schauen wir uns unsere Datei index.js an, und diese Datei erfordert einige Änderungen wie folgt.

Code - 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();

Nachdem wir die JS-Datei in die obige JS-Datei importiert haben, haben wir die Klasse gerade bestanden. Sie erhalten die folgende Ausgabe in Ihrer Konsole, wenn Sie das obige Beispiel ausführen.

Ausgang:

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Ihr System muss die neueste Version von Node JS enthalten, um ein React-Projekt auszuführen.