Блог

В Python вы можете сделать такую вещь:

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

Результатом было бы:

 Hey John
 

Я хочу сделать то же самое в React. Я знаю о f-строках в Python и их эквиваленте в ES6, но это не так, потому что для определения f-строк требуется переменная, которая помещается в строку. Мой вариант использования таков:

• передайте строку как /user/{userName}/details компоненту
• компонент создает таблицу, в которой каждая строка доступна для клика ( <Link to={...} /> ), а путь определяется значением в столбце некоторой строки

Так, например, для строки типа:

 foo 1234
 

Путь будет таким: /user/foo/details . Вы можете видеть закономерность.

Поэтому, как я уже упоминал, я не могу отформатировать строку перед передачей ее компоненту, потому что она должна быть отформатирована глубоко в функции визуализации этого дочернего компонента, как в map инструкции.

Есть ли способ сделать это в React?

P. S Я использую машинописный текст

@Редактировать:

Это то, что я действительно хочу сделать:

У меня есть общий PaginatedTable компонент. Он принимает columns и rows перечисляет конфигурацию в качестве реквизита.

Конфигурация выглядит следующим образом:

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

Итак, теперь to вставляется Link ( import { Link } from "react-router-dom"; , так что из react-router-dom , а не из MUI или что-то в этом роде). И обычно, если бы у меня была одна таблица, мне не пришлось бы этого делать, потому to что можно было бы указать, где у меня на самом деле есть переменная, которую я хочу в нее поместить /user/${userName}/details . Но поскольку это общая таблица, эти to значения будут отличаться, потому что в одной таблице будут пользователи, и каждый щелчок по строке будет переходить на другую страницу с другим пользователем, но если я захочу повторно использовать эту таблицу для, я не знаю, элементов, тогда to будет /items/${itemId} или что-то в этом роде.

Поэтому, когда я создаю эту опору конфигурации и передаю ее своему компоненту таблицы, у меня нет определения переменной, которая будет помещена в to поле. Я хочу, чтобы это был заполнитель, как в Python, чтобы позже я мог заменить его чем-то вроде .format(userName="foo") .

Вы можете импортировать generatePath из react-router-dom и сделать что-то очень близкое.

 import { generatePath } from "react-router";

...

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

...

const path = generatePath(pathTemplate, { userName: 'Drew' }); // "/user/Drew/details"