react-big-calendar不渲染其他组件中的任何内容

Question

我正在尝试用react-big-calender创建一些应用程序，但我遇到了一些奇怪的行为。如果我将它包装在任何其他组件中，而不是直接呈现它，它根本不会显示任何内容。

const App = () => {
  return (
    <div>
      <Cal />
    </div>
  );
};

ReactDOM.render(<Cal />, document.getElementById("root")); //<- works
ReactDOM.render(<App />, document.getElementById("root")); //<- works, but doesn't show anything

并且该Cal模块的定义与其example中的定义相同

这是我的codesandbox

Answer 1

这个问题与react-big-calender无关，它是CSS的问题。

试一试

<div style={{ width: "100%", height: "100%" }}>
  <Cal />
</div>