Изменить реагирующий компонент css на основе реквизита с css -модулями - PullRequest
Новая
       52

Изменить реагирующий компонент css на основе реквизита с css -модулями

1 голос
/ 14 января 2020

У меня есть следующее: 

className={`${this.props.match.params.id}.alert`}

/* desired output = `className="style_alert__3TLGs"` */
/* instead output = `className="style.alert"` */

Если я жестко закодировал имя_класса (например, {style.alert}), я получаю желаемый результат. Кажется, что результат является строкой и не обрабатывается пакетом css -module (возможно, потому что он отображается после?), Как я могу изменить это так, чтобы className обрабатывался css -module и связывался как Я намерен?

справочные документы: css -модули

1 Ответ

2 голосов
/ 14 января 2020

Вариант 1: Импортировать все известные вам модули стилей, которые вы будете использовать

Создайте карту импортированных объектов "стиля", которые будут введены с помощью id s, переданных в двигательный Просто нужно убедиться, что все объекты "style" имеют все одинаковые свойства CSS, такие как "alert", и, конечно, использовать защитный шаблон на пути объекта к параметру id, чтобы не было доступа "undefined of". 

import styles1 from "....";
import styles2 from "....";
...

const stylesMap = {
  style1Id: styles1,
  style2Id: styles2,
  ...
};

...

className={stylesMap[this.props.match.params.id].alert}

Плюсы: фронтальная загрузка всех необходимых вам CSS модулей и, вероятно, их немного проще обдумать и отладить

Минусы: использует больше ресурсов

Опция 2: Использовать динамический c импорт

Создать функцию asyn c для «извлечения» необходимого модуля CSS и использовать функцию жизненного цикла компонента или ловушку эффекта для обновления ссылки на объект стиля. 

const loadStyle = async (...params) => {
  try {
    const styleObject = await import(...path and module name from params);
    // setState or useState setter to set style object
  } catch {
    // set a fallback style object
  }
}
...

componentDidMount() {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}
**OR**
useEffect(() => {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}, [props.match.params.id, ...any other dependencies]);

...

className={stylesMap[<this.>state.styleObject].alert}

Плюсы: меньший размер / меньшее использование ресурсов.

Минусы: возможно, большая задержка при рендеринге, поскольку ресурсы не выбираются раньше времени.

Примечание : Также все зависит от использования вашего приложения, потребностей и требований. Например, если это связанное приложение (например, cordova / phonegap, Electron и т. Д. c), то разумнее будет включить все необходимые ресурсы.

...