简介
@beisen-cmps/italent-feed-80 是一款使用 React 技术栈构建的用于展示人才档案基础信息的组件库。该组件库提供了一个简单、易于使用的 API，可以帮助开发者快速集成并呈现人才档案基础信息。
使用方法
安装
首先需要在本地项目中安装@beisen-cmps/italent-feed-80，可以使用 npm 或者 yarn 进行安装，具体命令如下：
npm install @beisen-cmps/italent-feed-80 --save // 或者 yarn add @beisen-cmps/italent-feed-80
引入
安装完成后，可以在项目中引入该组件，首先需要引入组件的样式和依赖组件，具体如下：
import '@beisen-cmps/italent-feed-80/lib/italent-feed-80.css'; import React from 'react'; import ReactDOM from 'react-dom'; import ItalentFeed80 from '@beisen-cmps/italent-feed-80';
API
该组件库提供了四个可选 props，如下：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 自定义类名 | string | '' |
| style | 自定义样式 | Object | {} |
| cardData | 显示 FEED 的卡片数据，详情见下方 CardData Props | CardData[] | [] |
| headerProps | 显示列表的基础信息，详情见下方 HeaderProps | Object | { name: '', avatar: '' } |
CardData Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 卡片标题 | string | '' |
| avatar | 卡片头像 | string | '' |
| content | 卡片内容 | string | '' |
| infoData | 卡片信息数据 | Object | {} |
| icon | 卡片右侧图标 | string | '' |
| iconOnClick | 卡片右侧图标操作 | func |
HeaderProps
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 列表标题 | string | '' |
| avatar | 表头图标 | string | '' |
| onClick | 点击事件 | func |
示例
-- -------------------- ---- -------
------ -------------------------------------------------------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------- ---- -------------------------------
----- -------- - -
-
------ ------------
------- ---
-------- -----------------
--------- - ----- ------------------------ --------- ----------- --
----- ---
------------ -- -- -
------------------ -- --------
--
--
-
------ ------------
-------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------- --------
--------- - ----- ------------------------ --------- ----------- --
----- ---
------------ -- -- -
------------------ -- --------
--
--
--
----- ----------- - -
------ ------
-------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------- -- -- -
------------------ -- ----------
--
--
----------------
-------------- ------------------------- ------------------- ---
-------------------------------
--总结
感谢使用 @beisen-cmps/italent-feed-80 组件库，它可以帮助开发者快速展示人才档案基础信息。此外，我们在使用过程中，也需要注意一些细节的处理，例如组件样式的自定义以及组件 props 的合理使用等，这些都需要在实际开发中仔细思考和适时总结。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136322