React+TypeScript传递StyledIcon作为组件Props时报语法错误

嘿，我刚看完你的问题，这个错误其实是因为你传递的props类型和定义的类型不匹配导致的，咱们一步步来解决：

问题根源 #

你在IProps里把icon的类型定义为StyledIcon，但StyledIcon指的是图标组件本身的类型（也就是那个可以被调用的函数组件），而你在调用TextField时传递的是<PersonOutline size="20" color={colors.gray500}/>——这是一个已经渲染好的JSX元素（组件实例），两者类型完全不兼容，所以触发了语法/类型错误。

两种解决方案 #

方案1：修改Props类型以接收JSX元素 #

如果你就是想直接传递已经配置好的图标实例，那把icon的类型改成React.ReactNode或者JSX.Element就行：

import { ReactNode } from 'react';
import { StyledIcon } from 'styled-icons/types';

interface IProps {
  type: string;
  placeholder: string;
  icon: ReactNode; // 或者 JSX.Element
}

const TextField = (props: IProps) => {
  // 直接在组件里渲染props.icon就行
  return (
    <div>
      {props.icon}
      <input type={props.type} placeholder={props.placeholder} />
    </div>
  );
};

// 调用方式不变
<TextField 
  icon={<PersonOutline size="20" color={colors.gray500}/>} 
  type={'text'} 
  placeholder={'Name'} 
/>

方案2：传递图标组件本身，在内部配置属性 #

如果你想让TextField组件统一控制图标的样式（比如统一size、颜色），可以传递图标组件本身，然后在内部渲染：

import { StyledIcon } from 'styled-icons/types';

interface IProps {
  type: string;
  placeholder: string;
  Icon: StyledIcon; // 注意这里用大写开头，符合组件命名规范
}

const TextField = (props: IProps) => {
  const { Icon } = props;
  return (
    <div>
      {/* 在这里统一配置图标属性 */}
      <Icon size="20" color={colors.gray500} />
      <input type={props.type} placeholder={props.placeholder} />
    </div>
  );
};

// 调用时直接传组件，不用加<>
<TextField 
  Icon={PersonOutline} 
  type={'text'} 
  placeholder={'Name'} 
/>

小提示 #

• 记得要确保你的React类型定义已经安装（@types/react），不然ReactNode或者JSX.Element可能会报错。
• 第二种方案更适合需要统一图标样式的场景，维护起来更方便～

内容的提问来源于stack exchange，提问作者Dmitry Ko.