Question

我正在使用包 react-calendar 我将对其进行自定义以选择仅一个月，例如2020-02或2020-05，...以及单击按钮（图标）后，它应该先隐藏并显示。因此我编写了一个名为Dropdown的组件来对其进行切换，此外，我还设置了日历的显示道具以显示一年中的月份，并单击月份时，隐藏状态会更改，并且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>

我们将不胜感激。

[first toggle dropdown shows months] 1

[enter image description here] 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>

重新渲染组件以再次获得默认道具

1 个答案: