Aufrufbarer Telefonlink

Einführung

In diesem Lab werden wir lernen, wie man in React einen aufrufbaren Telefonlink mit dem tel:-Protokoll erstellt. Dieser Link ermöglicht es Benutzern, eine Telefonnummer direkt von ihrem Gerät aus mit einem Klick anzurufen. Am Ende dieses Labs werden Sie in der Lage sein, diese Funktion in Ihre eigenen React-Anwendungen zu integrieren und so deren Benutzerfreundlichkeit und Zugänglichkeit zu verbessern.

Aufrufbarer Telefonlink

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 einen Link zu erstellen, der eine Telefonnummer anruft, verwenden Sie die Komponente Callto. Diese Komponente erstellt ein <a>-Element mit einem passenden href-Attribut. Um den Link zu rendern, geben Sie die Telefonnummer über die Eigenschaft phone und den Linktext über die Eigenschaft children an.

const Callto = ({ phone, children }) => {
  return <a href={`tel:${phone}`}>{children}</a>;
};

Um die Callto-Komponente zu verwenden, rufen Sie die Methode ReactDOM.render() auf und übergeben das Callto-Element mit den festgelegten Eigenschaften phone und children.

ReactDOM.render(
  <Callto phone="+302101234567">Call me!</Callto>,
  document.getElementById("root")
);

Klicken Sie bitte 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 Lab "Aufrufbarer Telefonlink" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.