时间戳

首页 > 解决方案 > 重新渲染组件以再次获取默认道具

javascript - 重新渲染组件以再次获取默认道具

问题描述

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

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

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

导入部分：

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

标签： javascriptreactjs

解决方案

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

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

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>

推荐阅读