重新渲染组件以再次获取默认道具答案

【问题标题】：re-render component in react to get default props again重新渲染组件以再次获取默认道具
【发布时间】：2020-05-31 05:27:21
【问题描述】：

我正在使用包 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>

感谢任何帮助。

[first toggle dropdown shows months]1

[enter image description here]2

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/46240647/…
这能回答你的问题吗？ React - How can I force render a function component?
我之前读过这个，也读过reactjs.org/docs/react-component.html#forceupdate，但是你看到我的代码有状态并且当它改变时日历组件不会重新加载道具

标签： javascript reactjs

【解决方案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>

【讨论】：