Как в React при передаче данных передать className компоненте-конструктору?

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2023

Есть компонента-конструктор, которая принимает данные и создаёт нужный мне Field:

export const createField = (placeholder, name, validators, component, props = {}, text = '', className) => (
    <div>
        <Field placeholder={placeholder}
            name={name}
            validatate={validators}
            component={component}
            className={cl.className}
            {...props}
        /> {text}
    </div>
)

Например создаю Input и передаю в className строку 'errorClass'. В кавычках, так как если без них - то будет искаться переменная с этим названием

createField('Введите символы с картинки', 'captcha', [required], Input, {}, 'errorClass')

Но так как я использую css модули для стилизации, нужно указать cl. перед указанием класса. (import cl from './Login.module.css';). Как лучше передать значение желаемого класса и как нужно правильно в конструкторе его зафиксировать?

reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вот так можно передать название класса и вытащить его из объекта классов

export const createField = (placeholder, name, validators, component, props = {}, text = '', className) => (
    <div>
        <Field placeholder={placeholder}
            name={name}
            validatate={validators}
            component={component}
            className={cl[className]}
            {...props}
        /> {text}
    </div>
)

т.е. вместо явного указания ключа объекта cl.className передаем переменную cl[className] и значение из объекта cl будет взято по значению переменой