Почему я могу ссылаться на импортированные свойства объекта стиля напрямую, но не по ссылке?

#javascript #reactjs

Вопрос:

Я пытаюсь создать вспомогательную функцию для добавления импорта стилей в react. Я хочу просто сказать className={stylesJoin(..args)} вместо className={styles.style1 ' ' styles.style2 etc..}

 const stylesJoin = (...params) => {
  let stylesString = "";

  params.forEach((param) => {
    stylesString  = styles.param   " ";
  });

  return stylesString;
};

<div className={stylesJoin("buttonGroup__1", "buttonGroup__2")}>
</div>

Однако содержимое класса в HTML не определено, не определено.

Я проверил, относятся ли параметры [0] и параметры [1] === к ButtonGroup__1 и ButtonGroup__2: они обеспечивают желаемый результат, если на них ссылаются напрямую, например styles.ButtonGroup__1 ' ' styles.ButtonGroup__2

Ответ №1:

Конечный результат имеет undefined , потому что вы ссылаетесь styles.param (откуда styles берется?)

 const stylesJoin = (...params) => {
  let stylesString = "";

  params.forEach((param) => {
    stylesString  = styles.param   " "; // styles?
  });

  return stylesString;
};

Поскольку вы просто объединяете строки вместе, вся ваша функция может быть упрощена до

 const stylesJoin = (...params) => params.join(' ');

1. Спасибо, я новичок. Стили — это импорт модуля css, есть идеи, почему (просто для информации)?

2. Вы имеете в виду, что вы импортируете вызываемый модуль styles ? Это немного неясно

3. Импорт модуля CSS выполняется следующим образом: импортируйте стили из «./mycss.module.sass». Затем укажите нужное свойство css, например className={styles.button}

4. Ах, понял — тогда вы просто передадите их при вызове своей функции: stylesJoin(styles.buttonGroup__1, styles.buttonGroup__2)

5. Понял, есть ли другой способ добавить стили в функцию, чтобы сохранять стили ввода снова и снова?