reactjs - skicka en lista med objekt till en dropdown (välj) med TypeScript

Jag försöker skicka denna array av objekt

options = [
          {label:'React', value: 'react'},
          {label:'ReactNative', value: 'react-native'},
          {label:'JavaScript', value: 'js'},
          {label:'CSS', value: 'css'}        
        ];

till en urvals komponent

        <CustomSelect options={options} />

Ingenting tar bort klammerparenteserna. Jag har försökt:

         let options: { label: string, value: string}[] = [
           {label:'React', value: 'react'},
           {label:'ReactNative', value: 'react-native'},
           {label:'JavaScript', value: 'js'},
           {label:'CSS', value: 'css'}     
         ];

detta är en typ av array med strängar i den.

Jag har också försökt:

    interface Option {
      label: string,
      value: string
    }
    
    let options: Option[] ;
    
    options = [
      {label:'React', value: 'react'},
      {label:'ReactNative', value: 'react-native'},
      {label:'JavaScript', value: 'js'},
      {label:'CSS', value: 'css'}
    
    ];

att skapa ett objekt med strängar i. Min förståelse är att jag skapar ett gränssnitt eller en typ för att skapa ett objekt? När jag har skapat ett objekt behöver jag definiera arrayen av strängar och jag vet inte hur man gör det korrekt på ett TypeScript-sätt.

Svar #1

Om jag förstår rätt från frågan, kanske du behöver något som följande:

<select>
  <option value="">Select</option>
  {options.map((options) => (
    <option key={options.label} value={options.value}>
      {options.label}
    </option>
  ))}
</select>

Om du vill skapa en anpassad rullgardinskomponent i TypeScript kan denna codesandbox vara till hjälp

https://codesandbox.io/s/determined-rhodes-n6i8lc

Relaterade artiklar