In Python können Sie so etwas tun:

string_to_format = "Hey {name}"
formatted_string = string_to_format.format(name="John")
print(formatted_string)

Das Ergebnis wäre:

Hey John

Ich möchte dasselbe in der Reaktion tun. Ich kenne über F-Saiten in Python und ihr Äquivalent in ES6, aber dies ist nicht der Fall, da F-Saiten die Variable benötigen, die in Saite gestellt wird, um definiert zu werden. Mein Anwendungsfall ist das:

  • Geben Sie eine Zeichenfolge wie /user/{userName}/details an eine Komponente weiter
  • Komponente erstellt eine Tabelle, in der jede Zeile anklickbar ist ({{<Link to={...} />) und der Pfad wird durch einen Wert in einer Zeilensäule bestimmt

So zum Beispiel für eine Reihe wie:

foo 1234

Der Pfad wäre: /user/foo/details. Sie können das Muster sehen.

Wie ich bereits erwähnt habe, kann ich die Zeichenfolge nicht formatieren, bevor er ihn an eine Komponente angibt, da sie in der Renderfunktion dieser untergeordneten Komponente tief formatiert werden muss, wie in einer {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{map.

Gibt es eine Möglichkeit, es in Reaktion zu tun?

P.S i benutze typecript

@Bearbeiten:

Das will ich wirklich:

Ich habe eine generische PaginatedTable -Komponente. Es dauert {columns} und {rows listet + eine Konfiguration als Requisiten.

Die Konfiguration lautet wie folgt:

interface RowClickConfig {
  rowKey: string;
  to: string;
}

Jetzt ist {to in {Link ({{import { Link } from "react-router-dom";, also von {react-router-dom, nicht ein MUI eins oder so etwas). Normalerweise, wenn ich einen Tisch hätte, müsste ich dies nicht tun, weil to angegeben werden konnte, wo ich tatsächlich eine Variable habe, die ich in sie einlegen möchte, wie /user/${userName}/details. Da es sich jedoch um eine generische Tabelle handelt, wenden sich die Werte to an, da eine Tabelle Benutzer hat, und jede Zeile klicken Sie auf eine andere Seite mit einem anderen Benutzer, aber wenn ich diesen TABELLE wiederverwenden möchte, i Weiß nicht, Artikel, dann wäre das to /items/${itemId} oder so etwas.

Wenn Sie also diese CONFIG-PROP erstellen und an meine Tabellenkomponente erstellen, habe ich keine Definition für eine Variable, die in {{{{{{{to field ist. Ich möchte, dass es ein Platzhalter ist, wie in Python, also kann ich es später mit etwas wie .format(userName="foo") tauschen.

0
dabljues 3 Juni 2021 im 03:23

1 Antwort

Beste Antwort

Sie können generationspfad von {react-router-dom importieren und etwas sehr schließen.

import { generatePath } from "react-router";

...

const pathTemplate = "/user/:userName/details";

...

const path = generatePath(pathTemplate, { userName: 'Drew' }); // "/user/Drew/details"
2
Drew Reese 3 Juni 2021 im 00:50