Блог

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

Изменение идентификатора нескольких элементов массива реагирует

#javascript #css #reactjs #components #jsx

#javascript #css #reactjs #Компоненты #jsx

Вопрос:

Я использую React JSX с перехватами, и у меня проблема. Я хотел бы изменить идентификатор p всех векторных элементов, когда я нажимаю на один из них. В частности:

  • У меня есть вектор, и для каждого элемента этого вектора я вызываю компонент: cards.map((item, index) => (<Card key={index} card={item} index={index} hover={hover} /> ))}

  • Внутри компонента Card у меня есть тег div с событием onClick: <div onClick={TitleTransition} >

  • Функция TitleTransition изменяет состояние щелчка: function TitleTransition() { setClick(true);}

  • Это тег p внутри компонента Card: <p id={click ? "titleTransition" : ""}>{props.card.p1}</p>

Следовательно, когда я нажимаю на один из этих элементов (я назвал их card) Я хотел бы изменить идентификатор p для всех элементов (карточек).

Кто-нибудь может мне помочь? Спасибо!

Комментарии:

1. Динамические идентификаторы плохо пахнут кодом, а повторяющиеся идентификаторы для нескольких элементов недопустимы HTML

2. Спасибо за ваш ответ. Итак, как я мог это сделать?

3. Можете ли вы сначала исправить недопустимый HTML, по крайней мере?

Ответ №1:

это скорее предположительный ответ, чем что-либо еще, но я не могу прокомментировать до 50 репутации. Если бы мне пришлось угадывать, я бы сказал, что вы пытаетесь изменить стиль при нажатии на компонент карты и, возможно, дополнительно сбросить стиль других карт. В этом случае вы должны попытаться использовать вместо идентификатора идентификатора тега p либо style, либо className prop. Я полагаю, у вас есть файл css с чем-то похожим на

 #titleTransition {
/* Your styling if element is clicked */
}

Если вы используете параметр className, который является эквивалентом атрибута класса html, вам нужно изменить строку css на что-то вроде

 .titleTransition {
/* Your styling if element is clicked */
}

или

   :global(.titleTransition) {
    /* Your styling if element is clicked */
    }

или любой другой способ стилизации, который вы предпочитаете в react, их так много.

Если вы хотите изменить все элементы Card, onClick, вам, вероятно, придется сохранить набор данных для карт в состоянии в их родительском компоненте (где .map(…) используется для добавления элементов) и добавить атрибут к этим данным, например ‘isClicked’. Затем определите функцию, которая принимает индекс, и добавьте функцию к реквизитам карточки, например (), и вызовите эту функцию в карточке, добавив ее в . Затем используйте его в :

 <div onClick={() => props.onChildClickChangeDataState(props.index)} />

Это запустит функцию в родительском элементе, где вы можете выполнить итерацию по набору данных и изменить атрибут isClicked на значение, которое вам нравится.
Чтобы изменить стиль, вы можете использовать

 <p className={props.item.isClicked ? 'titleTransition' : '' />

Это подход, который поможет вам изменить все сразу, а также избежать упомянутого недопустимого HTML @CertainPerformance.
Надеюсь, я угадал правильно, и это поможет вам на правильном пути. В данный момент сложно помочь вам больше. Может быть, вы могли бы поделиться кодом вашего родительского компонента Card, Card, вашего файла CSS и почему вы хотели бы изменить все идентификаторы сразу. Тогда кто-нибудь мог бы помочь вам немного лучше.