使用 react-day-picker 和 react router v4 链接到不同的页面

Question

我正在尝试利用 this example 来创建一个列出当月事件的日历，我已经完成了这部分工作，但我还没有弄清楚如何制作以便用户可以单击事件名称并将他们带到该事件页面。

因此，根据该示例，如果他们单击其中一个生日，则会将他们带到一个活动页面，在那里他们可以看到有关该生日的更多信息。

目前，我的活动页面正在使用此功能呈现：

renderEvents() {
    const {events} = this.state
    this.state.events = {};
    let eventItems = this.state.eventGet.map(event => {
        console.log(event.id)
        if(typeof(events[moment(event.date).date()]) !== "undefined") {
            events[moment(event.date).date()].push(event.name)
        } else {
            events[moment(event.date).date()] = [event.name]
        }
    });

    function renderDay(day) {
      const date = day.getDate();
      const dateStyle = {
        position: 'absolute',
        color: 'lightgray',
        bottom: 0,
        right: 0,
        fontSize: 20,
      };
      const containerStyle = { 
        margin:'2px',
        border: '1px solid #3a87ad',
        borderRadius: '3px',
        position: 'relative',
        display: 'block',
        cursor: 'pointer'
     };
     const textStyle = {
        fontSize: '0.8em', 
        textAlign: 'left',
        margin: '1.5px',
     }
      const cellStyle = {
        height: 150,
        width: 160,
        position: 'relative',
      };

      return (
        <div style={cellStyle}>
          <div style={dateStyle}>{date}</div>
          {events[date] &&
            events[date].map((name, i) => (
              <div onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events' + i)} key={i} style={containerStyle}>
                <div style={textStyle}> {name} </div>
              </div>
            ))}
        </div>
      );
    }

    return (
        <div>
                <Grid component="section" className="section--center" shadow={0} noSpacing>
                <Cell col={12}>
                    <FABButton style={{margin: '10px', float: "right"}} colored ripple onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events')}>
                        <Icon name="add" />
                    </FABButton>
                </Cell>

                    <DayPicker
                      canChangeMonth={true}
                      className="Birthdays"
                      renderDay={renderDay}
                    />

                </Grid>
            </div>
    );
}

当前的问题出在子函数 renderDay 中，该函数由 DayPicker 组件调用，该组件获取与日期关联的事件。当我尝试推送到历史属性时，它出错并说我无法从未定义中读取属性 'history'，这是有道理的，因为我们没有传递历史属性到那个函数。

谁能帮我弄清楚如何修改该子功能，以便 div 上的 onClick 事件将用户带到该事件页面？

Answer 1

and says that I cannot read property 'history' from undefined

确保您的 renderDay 函数绑定到正确的 this：

<DayPicker
  canChangeMonth
  className="Birthdays"
  renderDay={renderDay.bind(this)}
/>

使用 react-day-picker 和 react router v4 链接到不同的页面

Linking to a different page using react-day-picker and react router v4

reactjs

react-day-picker

react-router-v4