帮我用js封装一个类似于antd库Timeline的时间轴组件 样式尽量与antd相似
时间: 2024-05-05 22:20:25 浏览: 16
好的,我可以帮您封装一个类似于antd库Timeline的时间轴组件,以下代码是基于React框架和Antd UI库的:
```jsx
import React from 'react';
import { Timeline } from 'antd';
class CustomTimeline extends React.Component {
render() {
const data = this.props.data;
return (
<Timeline mode="alternate">
{
data.map((item, index) => (
<Timeline.Item key={index}>
<p>{item.date}</p>
<p>{item.content}</p>
</Timeline.Item>
))
}
</Timeline>
);
}
}
export default CustomTimeline;
```
使用时只需要传入一个数据数组`data`,数组中每个元素都应包含`date`和`content`字段,分别代表时间和内容。像这样:
```jsx
import React from 'react';
import CustomTimeline from './CustomTimeline';
const data = [
{ date: '2022-01-01', content: '事件1' },
{ date: '2021-12-31', content: '事件2' },
{ date: '2021-12-25', content: '事件3' },
];
class App extends React.Component {
render() {
return <CustomTimeline data={data} />;
}
}
export default App;
```
这样就可以生成一个类似于Antd库的时间轴组件了。如果需要自定义样式,可以在传入组件的时候传入`className`属性,然后在CSS中进行样式覆盖。