如何在react typescript中使用react-horizontal-timeline模块？

Question

我现在正在研究 React TypeScript 项目。

这是我的代码片段。

import React, { useState } from 'react';
import HorizontalTimeline from 'react-horizontal-timeline';

interface Props {}

interface State {
  value: number;
  previous: number;
}

const VALUES: string[] = [
  '2008-06-01',
  '2010-06-01',
  '2013-06-01',
  '2015-03-01',
  '2019-01-01',
  '2019-06-17',
  '2019-08-01',
];

const Timeline: React.FC<Props> = () => {
  const [state, setState] = useState<State>({ value: 0, previous: 0 });

  const handleIndexClick = (index: number) => {
    setState({ value: index, previous: state.value });
  };

  return (
    <div>
      {/* Bounding box for the Timeline */}
      <div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
        <HorizontalTimeline
          index={state.value}
          indexClick={handleIndexClick}
          values={VALUES}
        />
      </div>
      <div className='text-center'>
        {/* any arbitrary component can go here */}
        {state.value}
      </div>
    </div>
  );
};

export default Timeline;

我运行了这个，但出现错误，

我尝试安装 @types/react-horizontal-timeline 但出现此错误。

我该如何修复这个错误？

Answer 1

您可以像下面一样添加导入，

// @ts-ignore

import HorizontalTimeline from "react-horizontal-timeline/dist/react-horizontal-timeline.js";