React新手求助：react-calendar单独函数中props显示undefined问题

核心问题出在你定义的onClickDay函数没有正确接收react-calendar自动传递的参数。当你用匿名箭头函数时，显式声明了value和event参数，所以能拿到值；但直接传函数引用时，如果你的函数没接收这些参数，自然会出现value为undefined的情况。

错误示例（导致value undefined） #

你可能写出了类似这样的代码：

import Calendar from 'react-calendar';

function MyCalendar() {
  // 错误：未接收react-calendar传递的value参数
  const onClickDay = () => {
    alert(`This is the value ${value}`);
  };

  return <Calendar onClickDay={onClickDay} />;
}

正确写法 #

只需要让你的onClickDay函数接收react-calendar传递的value和event参数即可：

import Calendar from 'react-calendar';

function MyCalendar() {
  // 正确：接收参数
  const onClickDay = (value, event) => {
    alert(`This is the value ${value}`);
  };

  return <Calendar onClickDay={onClickDay} />;
}

额外注意事项 #

• 不要在传递函数时加括号（比如onClickDay={onClickDay()}），这会导致组件渲染时就立即执行函数，而非点击时触发，且返回值会被当作事件处理器（通常是undefined）。
• 不管用箭头函数还是普通函数，只要正确接收参数就能正常工作，比如普通函数写法：

function onClickDay(value, event) {
  alert(`This is the value ${value}`);
}

内容的提问来源于stack exchange，提问作者user9174081