0
votes

Réagir de la maquette d'objets à un composant qui utilise différentes clés

J'essaie de rendre un élément dynamique

javascript reactjs

3 commentaires

Est-ce que


                                        
                                                                            Oui ça marche, mais je veux utiliser ce composant avec différents ensembles de données aussi
                                        
                                                                            Ensuite, vous devrez cartographier sur votre réseau de résultats pour créer une nouvelle avec les noms de propriété appropriés avant d'appeler ce composant.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous pouvez transmettre un objet mapper à votre sélection: 
function App () {
    const apiData = [
      {code: "IT", name: "Italy"},
      {code: "US", name: "United States"},
    ]

     const mapper = {value: 'code', caption: 'name'}; 
         return(
           <InputSelect items={apiData} mapper={mapper} />
          )
   }



   const defaultMapper = {value: "value", caption: "label"}

   function InputSelect ({ items, caption, mapper = defaultMapper }) {
      const {value, caption} = mapper
      return (
        <label className="form__element">
          {caption}
          <select className="input-select">
            {items.map((item, i) => <option key={i} value={item[value]}>{item[caption]}</option>)}
          </select>
        </label>
      )
    }

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     En supposant que vous possédez le composant  code> entrecelect  code>, vous pouvez avoir la section  légende  code> et  Valeur  code> de  accessoires  code> , comme ceci: 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    De plus, vous devez utiliser la valeur comme clé de l'option au lieu de l'index comme indiqué dans les commentaires.                                                
                                                
                                                                                            
                                                    C'est souvent vrai, et si vous vérifiez mon commentaire sur la question, je l'ai fait là-bas. Ce n'est probablement pas important ici, à moins que l'auteur ne soit trier, ajouter ou supprimer des éléments de ces listes de manière dynamique. Je vais éditer les extraits pour montrer cela, de toute façon.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                    
   Utilisez  Array.Prototype.map ( )  
 xxx                                  

                                                                    
                                    
                                    
                                        0 commentaires