React JS Fluent ui onRenderTitle

问题描述

你好，我是 reactc 的新手，必须使用 fluent ui

我正在尝试使用

更改自定义选项标签

onRenderTitle={(options) => ${options.name} (${options.roll_number})}

我的代码：

<Dropdown
  placeholder={"Select your School"}
  onChange={(event,val) => {
  if (val === null) {
  setSelectedSchool("")
  } else {                                                                       
  setSelectedSchool(val.key);
  }
   }}

  value={selectedcounty}

   options={getschool.filter(x => x.county === selectedcounty).map((school,key) => (
   {
     key: school.name,text: school.name
   }
    ))}
       onRenderTitle={(options) => `${options.name} (${options.roll_number})`}
/>

我得到

我想要的结果：

解决方法

onRenderTitle 是一个返回 Element 而不是 String 的函数。 选项的类型是IDropdownOption[]

<Dropdown
  ...
  onRenderTitle={options => <span>{options[0].key} ({options[0].text})</span>}
/>

Codepen example.