reactjs - 为什么日期范围选择器反应日期给出错误？

Question

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

import React from 'react'
import { connect } from 'react-redux';
import { DateRangepicker } from 'react-dates';
import {setTextFilter, sortByAmount, sortByDate, setStartDate,setEndDate} from '../actions/filters';

class ExpenseListFilters extends React.Component{
    state={
        calenderFocused:null
    };
    onDatesChange=({startDate,endDate})=>{
        this.props.dispatch(setStartDate(startDate));
        this.props.dispatch(setEndDate(endDate));
    }
    onFocusChange=(calenderFocused)=>{
            this.setState(()=>({calendarFocused}));

    }
    render(){
        return(
        <div>
        <input type="text"  
        value={this.props.filters.text} 
        onChange={(e)=>{
            this.props.dispatch(setTextFilter(e.target.value));
        }}/>
        <select 
        value={ this.props.filters.sortBy } 
        onChange={(e)=>{
            if(e.target.value === 'date'){
                this.props.dispatch(sortByDate());    
            }else if(e.target.value === 'amount'){
                this.props.dispatch(sortByAmount());                
            }
        }}>
            <option value="date">Date</option>
            <option value="amount">Amount</option>
        </select>

        <DateRangepicker
            startDate={this.props.filters.startDate}
            endDate={this.props.filters.endDate}
            onDatesChange={this.onDatesChange}
            focusedInput={this.state.calenderFocused}
            onFocusChange={this.onFocusChange}
         />


    </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return{
        filters:state.filters
    }
}
export default connect(mapStateToProps)(ExpenseListFilters);`

标签： reactjs

Answer 1

我相信您看到的问题是因为您的导入不正确。您需要导入DateRangePicker而不是DateRangepicker

从“反应日期”导入 { DateRangePicker }；

您可以在react-dates中查看更多详细信息。