javascript - React Horizo​​ntal Timeline distance of undefined 错误

Question

我正在尝试使用 React Horizontal Timeline在我的 React 应用程序中，但出现该错误(指向 react-horizo​​ntal-timeline.js 的第 379 行):

Uncaught TypeError: Cannot read property 'distance' of undefined

我的代码包括:

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

class Foo extends Component {
    state = {
        value : '01-01-1990',
        previous: 0
    };
    render(){
        const VALUES = ['20-04-1991'];
        return(){
            <div>
                <HorizontalTimeline values={VALUES} 
                    indexClick={(index) => {
                        this.setState({value: index, previous: this.state.value});
                    }} 
                />
                <div> {this.state.value} </div>
            </div>
        }
    }
}
export default Foo;

有人可以确定真正的问题，或者建议一些好的水平时间轴选项吗？

Answer 1

变化:

1. 您正在从 render 方法返回 2 个元素，您需要将它们包装在 div 中。

检查这个answer以获得更多解释。

2. 根据 link你附加的值需要一个 array 日期格式为 'mm/dd/yyyy'，但你传递的是 'dd/mm/yyyy':

const VALUES = ['20-04-1991'];

将其转换为正确的格式:

const VALUES = ['04/20/1991'];

试试这个:

render(){
        const VALUES = ['04/20/1991'];
        return(){
           <div>
               <HorizontalTimeline 
                  values={VALUES} 
                  indexClick={(index) => {
                      this.setState({value: index, previous: this.state.value});
                  }} 
               />
               <div className='text-center'>
                  {this.state.value}
               </div>
            </div>
        }
    }