Hooks im Nexca neu aufbauen

Nexca ist ein Admin-Panel, das wir kürzlich erstellt haben. In diesem Artikel werde ich jeden Hook erläutern, um ihn besser zu verstehen. Das neueste Update finden Sie hier.

useFetch

Der useFetch-Hook wird verwendet, um Daten wie Beiträge, Dienste oder Abschnitte von einer angegebenen URL abzurufen. Dieser Hook benötigt einen Parameter, nämlich die URL, von der die Daten abgerufen werden sollen.

const data = useFetch('/api/posts/');

useGetSection

Der useGetSection-Hook wird verwendet, um Daten aus einem bestimmten Abschnitt abzurufen. Dieser Hook ist besonders nützlich für den Client-Bereich. Es benötigt drei Parameter:

1. URL: Die URL, von der die Daten abgerufen werden sollen, normalerweise ein API-Endpunkt für Beiträge.
2. lengthItem: Die Anzahl der Elemente, die Sie in diesem Abschnitt anzeigen möchten.
3. secid: Die ID des Abschnitts, für den Sie Daten abrufen möchten.

Sie können auch den Ladestatus extrahieren, um ein Skelett anzuzeigen, während die Beiträge geladen werden.

const { data, loading } = useGetSection('/api/posts/', 8, 2);

Verwenden Sie GetLatestPosts

Der useGetLatestPosts-Hook wird verwendet, um die neuesten Beiträge auf der Website abzurufen. Dieser Hook benötigt einen Parameter:

• recentSize: Die Anzahl der letzten Elemente, die Sie anzeigen möchten.

Es empfiehlt sich, die Anzahl der Elemente, die Sie sehen möchten, mithilfe von useState festzulegen.

const [recentSize] = useState(5);
const { posts } = useGetLatestPosts(recentSize);

useCheckLogin

Der useCheckLogin-Hook wird ausschließlich für den Administrator verwendet, um zu überprüfen, ob ein Benutzer angemeldet ist. Er benötigt keine Parameter und sollte nur auf der Admin-Seite oder im Admin-Layout aufgerufen werden.

useSinglePost

Der useSinglePost-Hook wird verwendet, um einen einzelnen Beitrag basierend auf einem ID-Parameter abzurufen. Es findet den passenden Beitrag und zeigt ihn dem Benutzer an. Dieser Hook wird nur auf der Seite /Posts/[id] verwendet.

const post = useSinglePost();
// To read data from the post
<h1>{post.title}</h1>

useReadText

Der useReadText-Hook wird verwendet, um einen bestimmten Text mithilfe der Sprachsynthesefunktion des Browsers zu lesen. Es bietet Funktionen zum Starten und Stoppen des Lesevorgangs. Dieser Hook benötigt einen Parameter:

• Text: Der Text, der vorgelesen werden soll.

Der Hook behält den Status isSpeaking bei, um anzuzeigen, ob der Text gerade gelesen wird. Es werden drei Werte zurückgegeben:

1. isSpeaking: Ein boolescher Wert, der angibt, ob der Text gelesen wird.
2. handleReadText: Eine Funktion zum Starten des Lesens des Textes.
3. handleStopReading: Eine Funktion, um das Lesen des Textes zu stoppen.

import { useReadText } from './useReadText';

const ExampleComponent = () => {
  const { isSpeaking, handleReadText, handleStopReading } = useReadText('Hello, this is a sample text.');

  return (
    <div>
      <button onClick={handleReadText} disabled={isSpeaking}>Read Text</button>
      <button onClick={handleStopReading} disabled={!isSpeaking}>Stop Reading</button>
    </div>
  );
};

Live-Demo

Benutzername: admin
Passwort: a123b456@@

Das obige ist der detaillierte Inhalt vonHooks im Nexca neu aufbauen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!