Как создать уникальные идентификаторы для динамического добавления дочернего компонента в реагировать? - PullRequest
Новая
       22

Как создать уникальные идентификаторы для динамического добавления дочернего компонента в реагировать?

0 голосов
/ 02 июля 2019

Я новичок, чтобы реагировать, поэтому не уверен, как работает родитель-ребенок, но я пытаюсь добавить аккордеонный div по нажатию кнопки. Кнопка находится в родительском компоненте, а затем accordion находится в дочернем компоненте (чтобы сделать код читаемым и чистым). Проблема заключается в том, что как только добавляется аккордеон, идентификаторы для всех существующих аккордеонов на экране становятся такими же, как у последнего добавленного аккордеона, и цель аккордеона не выполняется, так как каждый аккордеон работает с идентификатором цели, а цель обновляется для существующих аккордеонов как как только будет добавлен новый аккордеон.

Пока я пробовал 2 вещи:

  1. Генерация уникального идентификатора на самом дочернем компоненте (который теперь я знаю, не будет работать)
  2. Отправка уникального идентификатора из родительского компонента в дочерний. При этом уникальный идентификатор успешно генерируется и отправляется дочернему компоненту, но проблема остается той же.

Родительский компонент: 

{(envelop) ?
   <AddCard
     senderName={this.state.senderName}
     senderAdd={this.state.senderAdd}
     recName={this.state.recName}
     recAdd={this.state.recAdd}
     ranId={randomId1}
    > 
    </AddCard> :
    <AddTable
     senderName={this.state.senderName}
     senderAdd={this.state.senderAdd}
     recName={this.state.recName}
     recAdd={this.state.recAdd}
     > 
     </AddTable>
}

Дочерний компонент (AddCard): 

    return (
        <div id="accordion">
           <div id="accHeader">
              <button
                 data-toggle="collapse"
                 data-target={"#collapseone_" + ranId}
                 aria-expanded="true"
                 aria-controls="collapseOne"
               >
                  {obj.senderName}
               </button>
             </div>
             <div id={"collapseone_" + ranId}>
               {obj.senderAdd}
               {obj.recName}
               {obj.recAdd}
             </div>
           </div>
        )

Ожидаемый результат - Карта A добавляется с data-target как collapseone_1 и div id как collapseone_1. Теперь, когда карта B добавлена, она должна иметь data-target как collapseone_2 и div id как collapseone_2, но идентификаторы карты A не изменяются (ranId уникален при передаче из родительского компонента)

Текущий результат:

Карта A добавляется с data-target как collapseone_1 и div id как collapseone_1. Теперь, когда карта B добавлена, она добавляется с data-target как collapseone_2 и div id как collapseone_2, но как только она добавляется, идентификаторы карты A меняются на collapseone_2 (данные-цели и div-идентификаторы оба ) поэтому аккордеон не работает должным образом, т. е. по щелчку карты B карта A переключается.

Edit- есть панель поиска, где пользователь может искать имя отправителя после выбора искомого значения и вызова родительского компонента. так что это как поиск и добавление аккордеона.

...