React useTitle-Hook

ReactReactBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir lernen, wie man den useTitle-Hook in React verwendet, um den Titel einer Webseite dynamisch zu setzen. Dieser Hook ist nützlich, wenn man Webanwendungen entwickelt, bei denen der Seitentitel dynamisch basierend auf dem angezeigten Inhalt geändert werden muss. In diesem Lab werden wir untersuchen, wie man den useTitle-Hook implementiert und ihn in einem praktischen Beispiel einsetzt.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38412{{"React useTitle-Hook"}} react/event_handling -.-> lab-38412{{"React useTitle-Hook"}} react/hooks -.-> lab-38412{{"React useTitle-Hook"}} react/use_state_reducer -.-> lab-38412{{"React useTitle-Hook"}} end

React useTitle-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Um den Titel der Seite zu setzen, können Sie den benutzerdefinierten useTitle-Hook verwenden. Dieser Hook verwendet typeof, um zu überprüfen, ob Document definiert ist. Wenn dies der Fall ist, wird der useRef()-Hook verwendet, um den ursprünglichen Titel des Document zu speichern. Anschließend wird der useEffect()-Hook verwendet, um Document.title auf den übergebenen Wert beim Mounten der Komponente festzulegen und beim Entfernen aufzuräumen.

const useTitle = (title) => {
  const documentDefined = typeof document !== "undefined";
  const originalTitle = React.useRef(documentDefined ? document.title : null);

  React.useEffect(() => {
    if (!documentDefined) return;

    if (document.title !== title) {
      document.title = title;
    }

    return () => {
      document.title = originalTitle.current;
    };
  }, [title]);
};

Im Beispielcode verwendet die Alert-Komponente den useTitle-Hook, um den Titel auf "Alert" zu setzen. Die MyApp-Komponente rendert einen Button, der die Alert-Komponente umschaltet.

const Alert = () => {
  useTitle("Alert");

  return (
    <div>
      <p>Alert! Title has changed</p>
    </div>
  );
};

const MyApp = () => {
  const [alertOpen, setAlertOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setAlertOpen(!alertOpen)}>Toggle alert</button>
      {alertOpen && <Alert />}
    </div>
  );
};

ReactDOM.render(<MyApp />, document.getElementById("root"));

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useTitle-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.