come assegnare dinamicamente agli elementi HTML un ID univoco in a for.. of loop (dattiloscritto)?

ho un array in cui ho bisogno di inserire elementi HTML identici. ho un for.. del ciclo di dattiloscritto che aggiungerà dinamicamente questi elementi nell’allineamento. voglio distinguere ogni elemento con un ID univoco. è possibile in un ciclo per.. di dattiloscritto?

segue il codice che ho:

for (let row of this.props.users) {
    userRows.push(
            <tr>
                <td>
                    <input type="radio"
                        id="customRadio1" 
                        name="customRadio" />
                </td>
            </tr>
    );
}

ora il ID è customRadio1 e sarà che per ogni elemento. voglio che il prossimo elemento HTML abbia customRadio2 e successivo customRadio3 e così via.

NB!! so che questo è possibile ottenere con la dichiarazione di una variabile di contatore sopra il for.. di ciclo e di incremento che per ogni esecuzione, in modo che variabile può essere utilizzato con il testo customerRadio, come customerRadio + {counter}. voglio sapere se questo è possibile solo usando la variabile row in for.. of loop e come?

EN From: How to dynamically give HTML elements an unique ID in a for..of loop(TypeScript)?

More similar articles:

11 Comments

  1. come su questo?

    for (let i in this.props.users) {
        /* Since i is a string, we need to convert it to a number before calculating 
           1-based index (to start with 'customRadio1') */
        let index = Number(i) + 1; 
        userRows.push(
            <tr>
                <td>
                    <input type="radio"
                        id={'customRadio' + index}
                        name="customRadio" />
                </td>
            </tr>
        );
    }
  2. dopo il commento da xadm circa forse utilizzando la mappa, invece, ho deciso di riscrivere il per.. di ciclo a una mappa, invece, e questo sembra conveniente e funziona:

       this.props.users.forEach((value: User, index: number) => {
            userRows.push(
                <tr>
                    <td>
                        <input type="radio" id={'customRadio' + {index}} name="customRadio" />
                    </td>
                </tr>);
        });

    se questo è possibile risolvere con per. del ciclo, prego lasciarlo comunque sapere per conoscenza futura.

    1. @UdithGunaratna E ‘una buona alternativa, ma questo è fatto con per.. dentro e stavo cercando.. di approccio, se questo è anche possibile. sia per.. in e mappa può essere utilizzato, ma mi piace map come la declinazione dell’indice può essere fatto sulla stessa linea di forEach e non è necessario per una declinazione variabile indice separato su una nuova linea.

      ho ancora votato la tua risposta in quanto risolve il problema:)

  3. @xadm Ho riscritto di utilizzare map invece e sembra una buona soluzione. vedi la risposta che ho fornito alla mia domanda se pensi che questa sia una buona soluzione?

  4. True map soluzione dovrebbe assomigliare a questo:

    const userRows = this.props.users.map( (value, index) => (
      <tr>
        <td>
          <input type="radio" id={'customRadio' + {index}} name="customRadio" />
        </td>
      </tr>)
    );
    1. ma definire il valore come tipo User aiuta l’editor a conoscere gli attributi dell’oggetto, in modo da ottenere suggerimenti da editor (come sto usando VS 2019) su quali attributi utilizzare l’oggetto, come ad esempio: email, firstname, cognome, ecc che vi farà evitare errori di ortografia.

    2. sono ancora d’accordo che array push può essere evitato quando si utilizza la variabile userRows!

Leave a Reply

Your email address will not be published. Required fields are marked *