前言
@beisen/timeline-wrapper 是一个以 Ant Design Timeline 为基础组件封装的，适用于非静态简单时间线的 React 组件。它提供了更方便和易用的 API，并支持自定义节点、内容等特性。
本篇文章将详细介绍如何使用 @beisen/timeline-wrapper 开发时间线应用，并深入讲解其源码实现，以及开发过程中的一些注意事项。
安装
使用 npm 或 yarn 进行安装：
npm install @beisen/timeline-wrapper --save yarn add @beisen/timeline-wrapper --save
API 设计
@beisen/timeline-wrapper 提供了以下 API：
<TimelineWrapper dataSource={dataSource} renderItem={renderItem} />
dataSource：时间线数据源，类型为数组，每一项为一个节点对象，包含：时间、内容、状态等信息。renderItem：自定义时间线节点渲染方法，返回值为 React 元素。
示例
下面是一个简单的使用示例，实现了一个 Repository 的提交时间线，包含时间、提交人、提交信息等：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ------- ------ --------------- ---- --------------------------- ----- ---------- - - - ----- ------------- ------- -------- -------- ------ -- - ----- ------------- ------- ------ -------- ------ ------- -- - ----- ------------- ------- ---------- -------- ---- ----- -- -- ----- ---------- - ------ -- - --------------- ------------------ -------------------- --------------------- ---------------- -- ----- ------------------ - -- -- - ---------------- ----------------------- ----------------------- -- -- ------ ------- -------------------展开代码
源码实现
TimelineWrapper
@beisen/timeline-wrapper 的核心实现是一个名为 TimelineWrapper 的 React 组件。它将 Ant Design Timeline 作为基础组件，对其进行了封装。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ------- ----- --------------- ------- --------------- - ------ ------------ - - ----------- --- ----------- ------ -- -------------------------------------- -- -------- - ----- - ----------- ---------- - - ----------- ----- ----- - --------------------------- ------ ----------------------------- - - ------ ------- ----------------展开代码
defaultProps 定义了组件默认属性。
render() 方法中，首先通过 dataSource.map(renderItem) 生成节点列表，然后渲染 <Timeline> 组件。
renderItem
renderItem 是用于自定义节点渲染的方法，其返回值为 React 元素。下面是一个简单的 renderItem 方法示例：
const renderItem = (item) => ( <Timeline.Item color={item.status}> <p>{item.time}</p> <p>{item.content}</p> </Timeline.Item> );
renderItem 方法接受一个参数 item，代表节点数据源。在 renderItem 方法中，可以自由使用 Ant Design Timeline 支持的属性，例如 color、dot、mode 等。
注意，需要通过 {} 的方式传递 color 等属性值。
总结
@beisen/timeline-wrapper 可以方便地实现非静态简单时间线，并且支持自定义节点渲染等特性。通过深入源码实现和示例演示，我们可以更好地理解它的设计和使用方法。
在开发过程中，需要注意 renderItem 方法中可以使用的 Ant Design Timeline 属性，以及各个节点之间的距离、颜色等样式问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-timeline-wrapper
