使用 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