使用 typescript 將對象數組傳遞給下拉列表（選擇）

Question

我正在嘗試傳遞這個對象數組

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

到 select 組件

        <CustomSelect options={options} />

沒有什么能把花括號拿走。 我試過了：

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

這是一個包含字符串的類型數組。

我也試過：

    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'}
    
    ];

創建一個帶有字符串的 object。 我的理解是我創建一個接口或者類型創建一個object？ 創建 object 后，我需要定義字符串數組，但我不知道如何以 typescript 的方式正確執行此操作。

Answer 1

如果我從問題中理解正確，您可能需要以下內容：

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

如果你想在 typescript 中制作自定義下拉組件，這個 codesandbox 可能會有所幫助

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