将鼠标悬停在日期上时如何在反应日历中显示日期的某些内容

【问题标题】：How to display some content for dates in react-calendar when you hover a mouse on dates将鼠标悬停在日期上时如何在反应日历中显示日期的某些内容
【发布时间】：2020-06-16 13:06:01
【问题描述】：

我想将鼠标悬停在 react-calendar 中的日期

当您将鼠标悬停在日期上时，如何在 react-calendar 中显示日期的一些内容

<Calendar
  style={{ height: 500 }}
  onChange={this.onChange}
  value={this.state.date}
/>;

【问题讨论】：

标签： css reactjs jsx

【解决方案1】：

如果我们谈论这个库：https://www.npmjs.com/package/react-calendar，您可以利用 tileContent 属性。这使您可以将所需的任何内容注入每个图块。您可以注入带有opacity 0 的div，它具有onMouseEnter 函数，可以在鼠标悬停时执行您喜欢的任何操作。这是一个例子：

<Calendar
  style={{ height: 500 }}
  onChange={this.onChange}
  value={this.state.date}
  tileContent={
    ({ activeStartDate, date, view }) => {
      return view === 'month' && date.getDay() === 0 
      ? <p onMouseEnter={
          //do whatever you want
          console.log('hi')
          }>It's Sunday!</p> 
      : null
    }
  }
/>;

【讨论】：