Блог

Главная - Вопросы по программированию - Как мне ссылаться на идентификатор элемента, который я создаю программно?

Как мне ссылаться на идентификатор элемента, который я создаю программно?

#reactjs #react-redux

#reactjs #react-redux

Вопрос:

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

У меня возникают проблемы с использованием идентификатора созданной кнопки для ее события onClick. Я пытался использовать this , this.id , и даже индекс, указанный в функции map, потому что идентификаторы совпадают с индексами; однако моему setSelectedRoom, похоже, не нравится эта функция.

i должно сработать, но я получаю сообщение об ошибке «Слишком много повторных рендерингов». Я не совсем уверен, как решить эту проблему. Есть идеи?

Функция map необходима, чтобы страница могла обновляться при добавлении новых комнат чата, так как мне избежать ошибки «Слишком много повторных отображений»?

 {props.chatData.map((val, i) => {
      return (
           <Button className={`room-${i}`} id={i} onClick={setSelectedRoom(i)}>#{val.name}</Button>
      )
})}

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

1. вам уже присвоен идентификатор, поэтому используйте его

2. @Joe Я не могу выбрать идентификатор. Это не определено

3. document.onload или angular.element(document). готово

Ответ №1:

Я мог бы дать вам идею. Попробуйте что-то вроде этого,

 {
  props.chatData.map((val, i) => {
    return (
      <Button className={`room-${i}`} id={i} onClick={() => setSelectedRoom(i)}>
        #{val.name}
      </Button>
    );
  });
}

кроме того, я думаю id , что это HTML-реквизит, и мы не можем получить к нему доступ. Попробуйте использовать другие имена, например chatID , и вы можете получить к нему доступ через this.props.chatID .

Выражение JSX выполняется немедленно, поэтому всякий раз, когда оно отображается, оно вызывает себя бесконечное количество раз. Вот почему оберните его другой функцией.