react-big-calendar嵌套在其他组件内时无法渲染任何内容问题排查

问题原因 #

react-big-calendar 采用相对高度布局逻辑，要求其直接父容器必须存在明确的高度值，否则组件会因为父容器高度计算为0被折叠隐藏。
你直接渲染<Cal />到root节点时，root节点默认继承了html、body的100%高度，满足日历的高度依赖条件，因此可以正常渲染；而把Cal包裹在App组件的div内部时，这层div未设置高度属性，默认高度由子内容撑开，但日历本身需要先读取父容器高度来计算自身尺寸，就会出现高度为0、无内容展示也无报错的情况。

解决方法 #

你可以任选以下任一方案修复：

• 方案1：给包裹Cal的父容器设置高度，同时确保根节点高度链路正常
  首先添加全局样式：

  html, body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

  再给包裹Cal的div设置高度：

  const App = () => {
    return (
      <div style={{height: '100%'}}>
        <Cal />
      </div>
    );
  };
  

• 方案2：直接给Cal组件设置固定高度，跳过父容器高度依赖

  const App = () => {
    return (
      <div>
        <Cal style={{height: '800px'}} />
      </div>
    );
  };
  

• 方案3：如果页面使用flex布局，给包裹Cal的父容器设置flex: 1，同时保证外层flex容器有明确高度，即可让日历自适应剩余页面高度。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad