Установка className на конкретную c часть состояния в отображаемых элементах - PullRequest
Новая
       76

Установка className на конкретную c часть состояния в отображаемых элементах

0 голосов
/ 05 мая 2020

Я хочу иметь несколько элементов в моем приложении React, каждый со своими classNames, определяемыми значением определенной c части состояния. Эти элементы отображаются в теги <p> с помощью вспомогательной функции, которая принимает массив объектов.

Вот пример того, как я хочу, чтобы моя конечная цель выглядела, 

<p className={this.state.notificationsClassName}>
    Notifications
</p>

Вот функция карты, которую я использую для генерации этих элементов, 

    generateTabs(array) {
        return Object.keys(array).map((key) => {
            return (
                <p className={??? something}>
                    {array[key].label}
                </p>
            );
        });
    }

Вот пример массива, который я загружаю generateTabs, 

const array = [
      {
        label: "Notifications",
        // I've tried both of these; 
        // className: {this.state.notificationsClassName},
        // className: "{this.state.notificationsClassName}",
      },
];

Моя проблема возникает от необходимости хранить данные в виде строки в объекте, но чтобы они интерпретировались как объект при отображении.

Спасибо за просмотр!

1 Ответ

1 голос
/ 05 мая 2020

Вы можете определить свой className в конфигурации массива как простую ключевую строку и разрешить ее из состояния. 

const array = [
     {
       label: "Notifications",
       className: "notificationsClassName",
     },
 ];

generateTabs(array) {
    return Object.keys(array).map((key) => {
        return (
            <p className={this.state[array[key].className]}>
                {array[key].label}
            </p>
        );
    });
}

Предложение: ваша конфигурация, т.е. массив, кажется array, но вы пытаетесь l oop их как Object.keys, что не требуется. Вы можете просто использовать array.map

Edit : Использование его с картой: 

generateTabs(array) {
    return array.map((obj) => {
        return (
            <p className={this.state[obj.className]}>
                {obj.label}
            </p>
        );
    });
}
...