import React, { forwardRef } from "react";
import { ReactComponent as Knowledge } from "./Knowledge.svg";
export const KnowledgeIcon = forwardRef<
SVGSVGElement & { className: any },
React.PropsWithChildren<{ className?: string }>
>(({className,...props}, ref) => {
return <Knowledge ref={ref} {...props} className={className || ''}/>;
});
这段代码是一个使用React库编写的组件,它通过forwardRef
高阶组件创建了一个可复用的图标组件。下面是对这段代码的详细介绍:
-
导入React和forwardRef:
React
是React库的默认导出,它包含了创建React组件所需的所有功能。forwardRef
是一个高阶组件,它允许将ref属性传递给被包装的组件。
-
导入SVG图标:
- 代码使用了
import
语句来导入一个名为Knowledge
的SVG图标组件。这个图标组件是通过./Knowledge.svg
路径引入的,这意味着它是一个SVG文件,被React作为组件处理。
- 代码使用了
-
定义KnowledgeIcon组件:
KnowledgeIcon
是一个使用forwardRef
创建的组件,它接受两个泛型参数:- 第一个泛型参数
SVGSVGElement & { className: any }
定义了组件的返回类型,即一个SVG元素,并且这个元素有一个className
属性。 - 第二个泛型参数
React.PropsWithChildren<{ className?: string }>
定义了组件的props类型,它包含一个可选的className
属性,并且可以包含子元素。
- 第一个泛型参数
-
组件的实现:
- 组件的实现是一个箭头函数,它接受一个对象参数
{className, ...props}
和一个ref
参数。 {...props}
是使用展开运算符...
来收集所有剩余的props,并将它们传递给Knowledge
组件。- 如果
className
属性存在,它将被添加到组件的className中;如果不存在,则组件将使用一个空字符串作为className。
- 组件的实现是一个箭头函数,它接受一个对象参数
-
渲染Knowledge图标:
- 使用
<Knowledge ref={ref} {...props} className={className || ''}/>
来渲染图标。这里,ref
被传递给Knowledge
组件,允许父组件访问到这个SVG元素。{...props}
将所有其他props传递给Knowledge
组件。className
属性根据条件渲染,如果传入了className
,则使用传入的值,否则使用空字符串。
- 使用
-
组件的用途:
KnowledgeIcon
组件可以被用于任何需要展示知识图标的地方,用户可以通过传递不同的className
来改变图标的样式,也可以通过子元素来添加更多的内容。
这段代码展示了React中使用SVG图标和高阶组件forwardRef
的一个常见模式,它允许开发者创建可复用且灵活的UI组件。
如果要修改的话,仿照上述模式就可以(但是这个是基于一个成熟的架构,我不清楚从头做是不是这样子)
import React, { forwardRef } from "react";
import { ReactComponent as Agent } from "./Agent.svg";
export const AgentIcon = forwardRef<
SVGSVGElement & { className: any },
React.PropsWithChildren<{ className?: string }>
>(({className,...props}, ref) => {
return <Agent ref={ref} {...props} className={className || ''}/>;
});