Grommet UI与TypeScript中List组件子元素类型错误求助

你的问题出在Grommet List组件的渲染方式使用错误，它不支持将渲染函数直接作为children传入，需要通过专门的属性来指定列表项的渲染逻辑。

错误原因 #

• Grommet的List组件中，children属性接收的是普通React节点（如静态文本、组件），而非函数类型，所以直接传函数会触发TypeScript类型不匹配错误。
• 用Fragment包裹函数后，组件依然不会将children视为可调用的函数，因此会抛出TypeError: children is not a function。

修正后的代码 #

import { List } from "grommet";
import { ResourceLink, ResourceLinkProps } from "./ResourceLink";

type ResourceListProps = {
  resources: ResourceLinkProps[],
}

const ResourceList: React.FC<ResourceListProps> = ({resources}) => {
  return (
    <List 
      data={resources} 
      border={false} 
      pad="none"
      renderItem={(resource: ResourceLinkProps) => (
        <ResourceLink 
          id={resource.id} 
          name={resource.name} 
          urlPart={resource.urlPart} 
        />
      )}
    />
  );
};

export default ResourceList;

关键改动 #

将原本作为children的渲染函数，移到List组件的renderItem属性上。Grommet的List会自动遍历data数组，调用renderItem函数生成每个列表项的内容，这才是组件设计的正确用法。

内容的提问来源于stack exchange，提问作者hammygoonan