在反应中重新渲染组件以再次获得默认道具

Question

我正在使用包react-calendar我将对其进行自定义以仅选择月份，例如 2020-02 或 2020-05 ，......而且它应该首先隐藏并在我单击按钮（图标）时显示。 所以我写了一个组件来切换它，命名为 Dropdown ，另外我设置了日历的视图属性以在它出现时显示一年中的月份，当我点击一个月份时，隐藏状态发生变化并且 Dropdown 将关闭并选择一个月。

然而问题是当我想再次点击按钮选择另一个月份时，日历从天而不是月视图开始，因为选择月份后它会选择日期。 实际上它需要重新渲染或再次设置“年份”到它的视图道具。

有没有办法在状态改变时重新渲染 Calendar 组件。

导入部分：

import ReactCalendar from "react-calendar";

状态部分：

const [hide, sethide] = useState(false);

退货部分：

<Dropdown
    forceHide={hide}
    onChangeShow={() => sethide(false)}
    toggle={   
        <Icon name="calendar" size={32} />    
    }
  >
    <ReactCalendar
      view={'year'}
      onClickMonth={value => {
        console.log("value", value);
        sethide(true);            
      }}
    />
  </Dropdown>

任何帮助表示赞赏。

[第一个切换下拉菜单显示月份] 1

[在此处输入图片说明] 2

Answer 1

我以这种方式解决了我的问题，但我不确定这是一个优化的解决方案，如果您有任何想法，请与我分享。

我定义了一个函数来在每次渲染时克隆它：

const RenderReactCalendar = ({view})=>{
 let Render = (
    <ReactCalendar
      onClickMonth={value => {
        console.log("value", value);
        sethide(true);            
      }}    />
  );

  return React.cloneElement(Render, { view }, {});
};

然后重构我的组件：

<Dropdown
    forceHide={hide}
    onChangeShow={() => sethide(false)}
    toggle={   
        <Icon name="calendar" size={32} />    
    }
  >
    <RenderReactCalendar
      view={'year'}
    />
  </Dropdown>