Di Python Anda dapat melakukan hal seperti itu:

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

Hasilnya adalah:

Hey John

Saya ingin melakukan hal yang sama dalam bereaksi. Saya tahu tentang F-string di Python dan yang setara dalam ES6, tetapi ini bukan masalahnya, karena F-string membutuhkan variabel yang dimasukkan ke string. Kasus penggunaan saya adalah ini:

  • lulus string seperti /user/{userName}/details ke komponen
  • Komponen membuat tabel di mana setiap baris dapat diklik (<Link to={...} />) dan jalur ditentukan dengan nilai di beberapa kolom baris

Jadi misalnya untuk baris seperti:

foo 1234

Jalur akan: /user/foo/details. Anda dapat melihat polanya.

Jadi seperti yang saya sebutkan, saya tidak dapat memformat string sebelum meneruskannya ke komponen karena harus diformat dalam dalam fungsi render komponen anak ini, seperti dalam pernyataan map.

Apakah ada cara untuk melakukannya secara bereaksi?

P.S saya menggunakan naskah

@Etit:

Inilah yang benar-benar ingin saya lakukan:

Saya memiliki komponen generik PaginatedTable. Dibutuhkan columns dan rows daftar + konfigurasi sebagai alat peraga.

Konfigurasi adalah sebagai berikut:

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

Jadi sekarang, to dimasukkan ke dalam Link (import { Link } from "react-router-dom";, jadi dari react-router-dom, bukan satu MUI, atau sesuatu seperti ini). Dan biasanya, jika saya akan memiliki satu tabel, maka saya tidak perlu melakukan ini, karena to dapat ditentukan di mana saya benar-benar memiliki variabel yang ingin saya masukkan seperti /user/${userName}/details. Tetapi karena itu adalah tabel generik, nilai-nilai to itu akan berbeda, karena satu tabel akan memiliki pengguna, dan setiap klik baris akan pergi ke halaman lain dengan pengguna yang berbeda, tetapi jika saya ingin menggunakan kembali tabel ini, saya Tidak tahu, item, lalu to akan menjadi /items/${itemId} atau sesuatu seperti ini.

Jadi ketika saya membuat prop konfigurasi ini dan meneruskannya ke komponen tabel saya, saya tidak memiliki definisi untuk variabel yang akan dimasukkan ke bidang to. Saya ingin itu menjadi placeholder, seperti di Python, jadi saya nantinya bisa menukarnya dengan sesuatu seperti .format(userName="foo").

0
dabljues 3 Juni 2021, 03:23

1 menjawab

Jawaban Terbaik

Anda dapat mengimpor generatepath dari react-router-dom dan lakukan sesuatu yang sangat dekat.

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, 00:50