反应未定义错误的水平时间轴距离

我试图在我的反应应用程序中使用反应水平时间线 ,但我得到的错误(指向行水平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; 

有人可以确定真正的问题,或者提出一些很好的select水平时间线的反应?

变化

1.你从render方法返回2个元素,你需要把它们包装在一个div

检查这个答案更多的解释。

2.根据您附加的链接 ,值需要'mm/dd/yyyy'格式的date列表,但您传递'dd/mm/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> } } 

问题中发布的代码段中有两个主要问题。

  • 错误的date格式:根据简单和有限的文件 ,所需的格式是mm/dd/yyyy 。 由@Mayank指出

  • index声明:在使用index={this.state.value}之前需要先定义index={this.state.value}

看到类似的github问题

Interesting Posts