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.
1 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"