React JS Fluent ui onRenderTitle

Question

你好，我是 React 的新手，必须使用流利的 ui

我正在尝试使用

更改自定义选项标签

onRenderTitle={(选项)=>${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})`}
/>

我得到

我想要的结果：

Answer 1

onRenderTitle 是 returns Element 而不是 String 的函数。 options 的类型是 IDropdownOption[]

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

Codepen example.

React JS Fluent ui onRenderTitle

React JS Fluent ui onRenderTitle

reactjs

fluentui-react