react创建组件_如何使用React创建时间轴组件

react创建组件

These days I’ve been working on a new page for my website. I wanted to have a Timeline to showcase some of my professional accomplishments over the years.

这些天来，我一直在为网站创建新页面。 我希望有一个时间表来展示我多年来的一些专业成就。

I did it for a couple of reasons:

我这样做有两个原因：

1. My future self will look back one day and say: “Wow… I remember the day when I did that! How happy I was to achieve that goal!” Our success is a journey, not a destination and I want to write down every goal that I achieve along the way
   我未来的自我有一天会回头说：“哇……我记得那天我做到了！ 我为实现这个目标感到多么高兴！” 我们的成功是一段旅程，而不是终点，我想写下一路实现的每个目标
2. It might attract more clients (we’ll see how this goes ?)
   它可能会吸引更多的客户(我们将看看情况如何？)
3. In my opinion it is a different kind of portfolio. A unique portfolio, maybe? ?
   我认为这是另一种投资组合。 独特的投资组合，也许吗？ ？

Nevertheless… Let’s build something now!

不过……让我们现在建立一些东西！

In the picture above you can see what we’re going to build today using React! Before we start let’s break down the steps we need to take:

在上图中，您可以看到我们今天将使用React构建什么！ 在开始之前，让我们分解一下我们需要采取的步骤：

1. Create the data that we'll need

   创建我们需要的data

2. Create the TimelineItem component - each individual timeline entry

   创建TimelineItem组件-每个单独的时间线条目

3. Create a Timeline container - it will take the data and pass it down to the TimelineItems

   创建一个Timeline容器-将获取data并将其传递给TimelineItem

4. Style everything
   风格化一切

创建数据 (Create the data)

Before we move to actually create the React components we need to know exactly how the data is going to look so we can plan out the DOM structure.

在实际创建React组件之前，我们需要确切地知道数据的外观，以便我们可以规划DOM结构。

For this Timeline app we’re going to need an array of objects. We will call this array: timelineData.

对于此时间轴应用程序，我们将需要一个对象数组 。 我们将其称为数组： timelineData 。

Let’s see how it might look:

让我们看一下它的外观：

[
    {
        text: 'Wrote my first blog post ever on Medium',
        date: 'March 03 2017',
        category: {
            tag: 'medium',
            color: '#018f69'
        },
        link: {
            url:
                'https://medium.com/@popflorin1705/javascript-coding-challenge-1-6d9c712963d2',
            text: 'Read more'
        }
    },
    {
        // Another object with data
    }
];

The properties are pretty straightforward, right? I used similar data to what I have on my timeline page, so we can say that this is production ready! ?

属性非常简单，对吧？ 我使用了与时间表页面上相似的数据，因此可以说这已经可以投入生产了！ ？

Next, we’ll build the TimelineItem component. This will use the data from the object above:

接下来，我们将构建TimelineItem组件。 这将使用上面对象中的数据：

TimelineItem组件 (The TimelineItem component)

const TimelineItem = ({ data }) => (
    <div className="timeline-item">
        <div className="timel