reactjs - 此 JSX 标签的 'children' 属性需要一个类型为 'ReactNode' 的子代，但提供了多个子代

Question

我是 typescript 新手，将数组转换为选项标记但收到错误，我的界面是

interface ViewEmployeeManagerPostType {
  id: string;
  user: string;
  department: string;
  experience: string;
  height: string;
  value: string;
  children: React.ReactNode[] | React.ReactNode;
};

我的数组

const [ManagerEmployee, setManagerEmployee] = useState<ViewEmployeeManagerPostType[]>([]);

组件返回()

----
----
<option value="">Select Employee ID</option>
    {ManagerEmployee.map((option) => 
       <option key={count++} value={option}>
          Employee ID = {option}
       </option>
     )}
----
----

我在选项开始标记和值上遇到错误

Answer 1

如您所见，有一个明确的要求:'children' prop expects a single child ，因此

children: React.ReactNode;

当您向 children 提供 React 节点数组时组件 Prop ，只需用 <Fragment> 包裹它们即可或<>像这样

children={
   <>
    <option value="">Select Employee ID</option>
    {ManagerEmployee.map((option) => 
       <option key={option.id} value={option.value}>
         Employee ID = {option.id}
       </option>
   )}
   </>
}