Material-UI v1 Beta中如何无需弹窗渲染纯日历组件？

别担心，在Material-UI v1 Beta版本里完全可以实现直接渲染日历组件，不用非得套对话框！我给你一步步说清楚具体操作：

1. 找对组件的导入路径 #

v1 Beta里，纯日历组件是DatePicker的底层核心组件，名叫Calendar，你需要从material-ui/DatePicker这个路径导入——这和旧版本的导入方式确实不一样，之前的旧答案可能没跟上Beta版的变化。具体导入代码是：

import Calendar from 'material-ui/DatePicker/Calendar';

2. 直接在组件中使用Calendar #

你可以像用普通React组件一样直接渲染它，不需要包裹在DatePicker或者对话框里。举个简单的例子：

import React from 'react';
import Calendar from 'material-ui/DatePicker/Calendar';

function StandaloneCalendar() {
  // 用状态管理选中的日期
  const [selectedDate, setSelectedDate] = React.useState(new Date());

  // 处理日期选择变化
  const handleDateSelect = (date) => {
    setSelectedDate(date);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>独立日历组件</h3>
      <Calendar
        date={selectedDate}
        onChange={handleDateSelect}
      />
    </div>
  );
}

export default StandaloneCalendar;

3. 关于Beta版源码的小提示 #

你说在GitHub找不到Beta版源码？其实它就在Material-UI仓库的v1-beta分支里，不过如果你只是想用组件，完全不用去翻源码，直接通过npm安装对应的版本就行：

npm install material-ui@next

当时的@next标签就是指向v1 Beta版本的。

要不要回退到旧版本？ #

完全没必要！v1 Beta已经足够稳定，能很好支持独立日历组件的使用，而且后续的正式版都是基于这个分支迭代的，坚持用Beta版或者升级到正式版，对项目长期维护更有利。

内容的提问来源于stack exchange，提问作者m41w4r3.exe