Как построить аккордеон из массива, сопоставив его элементы в React?

#javascript #reactjs

Вопрос:

Для создания этого аккордеона я использовал Bootstrap

Аккордеон:

                         <div className="accordion" id="typesAcc">
                            {types.map((type, id) => (
                                <div className="card">
                                    <div className="card-header mx-auto" id={`heading${id}`}>
                                        <h5>
                                            <button className="btn collapsed" type="button" data-toggle="collapse" data-target={`#collapse${id}`} aria-expanded="false" aria-controls={`collapse${id}`}>
                                                {type.title}
                                            </button>
                                        </h5>
                                    </div>

                                    <div id={`collapse${id}`} className="collapse" aria-labelledby={`heading${id}`} data-parent="#typesAcc">
                                        <div class=" card card-body lead">
                                            {type.article}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

Массив типов:

         const types = [
            {
                title: 'Title 1',
                article: 'Article 1'
            },
            {
                title: 'Title 2',
                article: 'Article 2'
            }
        ]

Но когда я нажимаю на кнопку , содержащую заголовок текущего type , то article он не отображается. Он остается разрушенным. Как это решить?

1. Измените класс атрибута на имя класса в ` <div class=» ведущий элемент карты-тело карты»>`.

2. Да, это выдает предупреждение, но я не знаю, почему статья остается свернутой.

3. я не вижу никаких обработчиков onClick на вашей кнопке . Как вы переключаете состояние свернутого? Также используете ли вы какие-либо другие библиотеки для визуализации вашего аккордеона ?

4. @Shyam Я не использовал обработчики onClick, но, ссылаясь на аккордеон Bootstrap , я использовал другие. Думаю, теперь я попробую это сделать с помощью обработчиков css и onClick. Я все еще не могу найти проблему здесь в использовании начальной загрузки.

Ответ №1:

Вашей кнопке не назначен обработчик щелчков, который установил бы некоторое состояние и вызвал бы повторную визуализацию компонента. Если вы используете библиотеку начальной загрузки, я рекомендую ознакомиться с этой документацией: https://react-bootstrap.github.io/components/accordion/

Ответ №2:

Пожалуйста, добавьте обработчики событий к кнопкам.

Подробнее об обработке событий см. Здесь: https://reactjs.org/docs/handling-events.html