Schrittweise Implementierung der Expand/Collapse-Funktion in React

1. Implementieren Sie eine Expand/Collapse-Funktion in React
2. Erweitern/Reduzieren Sie den gesamten Container in React
3. Erweitern/Reduzieren Sie bestimmte Beiträge in React
4. Erweitern oder reduzieren Sie alle Beiträge in React
5. Abschluss

Beim Erstellen von Webanwendungen müssen Sie häufig das Erscheinungsbild bestimmter Elemente in DOM dynamisch ändern.

In anderen Fällen müssen Sie Inhalte nur dann anzeigen, wenn der Benutzer sie sehen möchte. Dies kann Ihnen helfen, große Mengen an Inhalten zu verwalten, ohne den Benutzer zu überfordern, und eine gute Benutzererfahrung bieten.

In diesem Artikel möchten wir Ihnen zeigen, wie Sie die Erweiterungs-/Reduzierungsfunktion implementieren, um Container als Reaktion auf das Klicken auf eine Schaltfläche durch den Benutzer anzuzeigen oder auszublenden.

Implementieren Sie eine Expand/Collapse-Funktion in React

Mit React können Sie Komponenten bedingt ein- und ausblenden. Ob eine Komponente gerendert wird oder nicht, hängt vom Wert der Zustandsvariablen ab, die als Reaktion auf die Aktionen des Benutzers geändert werden kann.

Sie können eine Zustandsvariable vom Typ boolean speichern. In JSX können Sie einen ternären Operator (oder eine if-Bedingung innerhalb einer Funktion) verwenden, um bedingt zu bestimmen, ob bestimmte DOM-Elemente (oder Komponenten) gerendert werden sollen oder nicht.

Beginnen wir mit einem Beispiel: Wir haben eine übergeordnete Komponente, die eine Liste von Posts anzeigt, die von der Komponente <Post> gerendert werden.

import "./styles.css";
import { useState } from "react";
export default function App() {
  let postsArr = ["post1", "post2", "post3", "post4", "post5"];
  const [postDisplay, setPostDisplay] = useState({
    post1: true,
    post2: true,
    post3: true,
    post4: true,
    post5: true
  });
  const [divDisplay, setDivDisplay] = useState(true);
  const handleClick = (post) => {
    const objectCopy = {
      ...postDisplay
    };
    objectCopy[post] = !objectCopy[post];
    setPostDisplay(objectCopy);
  };
  return (
    <div className="App">
      <button
        onClick={() =>
          setPostDisplay({
            post1: false,
            post2: false,
            post3: false,
            post4: false,
            post5: false
          })
        }
      >
        Hide All Posts
      </button>
      <br />
      <button
        onClick={() =>
          setPostDisplay({
            post1: true,
            post2: true,
            post3: true,
            post4: true,
            post5: true
          })
        }
      >
        Show All Posts
      </button>
      <br />
      <button onClick={() => setDivDisplay(!divDisplay)}>
        Expand/Collapse the post section
      </button>
      {postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
      )}
    </div>
  );
}

function Post() {
  return (
    <div className="post">
      <p>
        Some content
      </p>
    </div>
  );
}

In diesem Fall haben wir anstelle einer booleschen Zustandsvariablen ein Objekt mit booleschen Werten, eines für jeden Beitrag. Dadurch können wir nur einige Posts erweitern und andere reduziert (versteckt) lassen.

Bevor wir diesen Code kurz aufschlüsseln, können Sie die dynamische Erweiterungs-/Reduzierungsfunktion auf CodeSandbox überprüfen.

Innerhalb unserer App-Komponente haben wir eine Reihe von Beiträgen. In JSX wenden wir eine .map()-Methode auf das postsArr-Array an und prüfen bedingt, ob wir den gesamten Postcontainer oder einzelne Posts anzeigen sollen.

let postsArr = ["post1", "post2", "post3", "post4", "post5"];
...
{postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
)}

Erweitern/Reduzieren Sie den gesamten Container in React

Zuerst prüfen wir den Wert von divDisplay, um festzustellen, ob wir das <div>-Element rendern sollen, das <Post />-Komponenten enthält. Wenn Sie die CodeSandbox Live-Demo besuchen, sehen Sie, dass wir eine Schaltfläche haben.

Durch Klicken auf diese Schaltfläche wird der aktuelle Wert der Zustandsvariablen divDisplay umgedreht. Wenn der Container <div> reduziert ist, wird er durch Klicken auf diese Schaltfläche erweitert.

Wenn er erweitert ist, wird der Container durch Klicken auf die Schaltfläche ausgeblendet. Schauen wir uns den Code für diese Schaltfläche an.

<button onClick={() => setDivDisplay(!divDisplay)}>
        Expand/Collapse the post section
</button>

Wir setzen ein onClick-Attribut auf das <button>-Element und setzen seinen Wert auf eine einfache Pfeilfunktion, die die Funktion setDivDisplay() aufruft, die die Zustandsvariable divDisplay aktualisiert. Wir haben die Updater-Funktion mit dem Hook useState definiert.

const [divDisplay, setDivDisplay] = useState(true);

Wir setzen den Wert der Variablen divDisplay standardmäßig auf true. Später können Benutzer den Wert dieser Variablen umdrehen, indem sie auf die Schaltfläche klicken.

Erweitern/Reduzieren Sie bestimmte Beiträge in React

Unter der Annahme, dass wir das gesamte <div>-Element erweitern, das Beiträge enthält, können wir auch einzelne Beiträge erweitern oder reduzieren, wodurch der Inhalt des Beitrags ausgeblendet oder angezeigt wird.

Schauen wir uns den Codeabschnitt an, in dem wir <Post>-Komponenten generieren.

{postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
)}

Wir wenden eine map()-Methode auf das postsArr-Array an und geben ein <div>-Element zurück, das eine Schaltfläche zum Ein-/Ausblenden der Schaltfläche und einen ternären Operator speichert, der den Wert des postDisplay-Objekts auf die Eigenschaft überprüft jedes Elements im Array.

Es mag verwirrend sein, aber schauen wir uns noch einmal die Array- und Zustandsvariablen an.

let postsArr = ["post1", "post2", "post3", "post4", "post5"];

const [postDisplay, setPostDisplay] = useState({
    post1: true,
    post2: true,
    post3: true,
    post4: true,
    post5: true
  });

Wie Sie vielleicht wissen, nimmt die Methode map() jeden String im Array. Dann wird der Wert dieser Eigenschaft im Objekt postDisplay überprüft.

Beispielsweise nimmt die erste Methode map() die Zeichenfolge 'post1' und rendert eine Komponente <Post>, indem sie den Wert des Ausdrucks postDisplay['post1'] überprüft.

{postDisplay[post] ? <Post key={post}></Post> : null}

Beachten Sie, dass die Methode map() die Callback-Funktion als Argument verwendet und jedes Array-Element als Variable behandelt. Daher müssen wir die Klammernotation verwenden, um den Wert der Eigenschaft nachzuschlagen.

Der ternäre Operator gibt null zurück, wenn der Eigenschaftswert falsch ist, was nichts darstellt.

Gehen Sie zur CodeSandbox-Demo und versuchen Sie, einzelne Beiträge zu erweitern und zu reduzieren, indem Sie auf eine Schaltfläche klicken. Die Verwendung des Objektformats ermöglicht es uns, den Inhalt einiger Posts zu erweitern, während andere reduziert bleiben.

Erweitern oder reduzieren Sie alle Beiträge in React

Oben auf der Seite haben wir zwei Schaltflächen - die erste blendet alle Beiträge ein, die derzeit erweitert werden können, und die zweite erweitert alle Beiträge. Versuchen Sie, auf diese Schaltflächen in der Live-Demo zu klicken, um ihre Funktionalität besser zu verstehen.

Schauen wir uns nun an, wie dies in React erreicht wird.

<button
	onClick={() =>
	  setPostDisplay({
		post1: false,
		post2: false,
		post3: false,
		post4: false,
		post5: false
	  })
	}
  >
	Hide All Posts
  </button>
  <br />
  <button
	onClick={() =>
	  setPostDisplay({
		post1: true,
		post2: true,
		post3: true,
		post4: true,
		post5: true
	  })
	}
  >
	Show All Posts
  </button>

Wir setzen das Attribut onClick, also rufen wir immer dann, wenn der Benutzer auf die erste Schaltfläche klickt, die Funktion setPostDisplay() mit einem Objekt auf, bei dem die Werte aller Eigenschaften (entsprechend dem Status einzelner Posts) auf false gesetzt werden. .

Die zweite Schaltfläche macht dasselbe, allerdings werden in diesem Fall alle Objekteigenschaften auf true gesetzt. Daher wird durch Klicken auf diese Schaltflächen der Inhalt aller Beiträge erweitert.

Abschluss

Dies ist ein sehr einfaches Beispiel; Normalerweise haben Websites elegantere Schaltflächen zum Erweitern und Reduzieren von Containern in React. Schaltflächenstile können unterschiedlich sein, aber die funktionale Implementierung ist die gleiche oder sehr ähnlich zu dem, was wir hier gezeigt haben.