Dans Python, vous pouvez faire une telle chose:

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

Le résultat serait:

Hey John

Je veux faire la même chose dans réagir. Je sais sur les fûtes F dans Python et leur équivalent en ES6, mais ce n'est pas le cas, car les chaînes F ont besoin de la variable qui est mise à la chaîne à définir. Mon cas d'utilisation est ceci:

  • Passer une chaîne comme /user/{userName}/details à un composant
  • Le composant crée une table dans laquelle chaque ligne est cliquable (<Link to={...} />) et le chemin est déterminé par une valeur de la colonne de certaines lignes.

Donc, par exemple pour une ligne comme:

foo 1234

Le chemin serait: /user/foo/details. Vous pouvez voir le motif.

Ainsi, comme je l'ai mentionné, je ne peux pas formater la chaîne avant de la transmettre à un composant car elle doit être formatée au fond de cette fonction de rendu de la composante enfant, comme dans une instruction map.

Y a-t-il un moyen de le faire dans réagir?

P.s j'utilise documentscript

@Éditer:

C'est ce que je veux vraiment faire:

J'ai un composant générique PaginatedTable. Il faut columns et rows répertorie + une configuration comme des accessoires.

La configuration est la suivante:

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

Alors maintenant, to est mis en Link (import { Link } from "react-router-dom";, donc de react-router-dom, pas un mui, ni quelque chose comme ça). Et normalement, si j'aurais une table, je n'aurais pas à faire cela, car to pourrait être spécifié là où je dispose d'une variable que je veux y mettre comme /user/${userName}/details. Mais puisqu'il s'agit d'une table générique, ces valeurs to diffèrent différemment, car une table aura des utilisateurs et chaque ligne clic irait sur une page différente avec un utilisateur différent, mais si je veux réutiliser cette table pour, je Je ne sais pas, les articles, alors le to serait /items/${itemId} ou quelque chose comme ça.

Donc, lorsque je crée ce processus de configuration et transmettez-le à ma composante de table, je n'ai pas de définition pour une variable qui sera mise au champ to. Je veux que ce soit un espace réservé, comme dans Python, je peux donc l'échanger par quelque chose comme .format(userName="foo").

0
dabljues 3 juin 2021 à 03:23

1 réponse

Meilleure réponse

Vous pouvez importer GeneratePath de react-router-dom et faire quelque chose de très proche.

import { generatePath } from "react-router";

...

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

...

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