reactjs - 将箭头函数转换为带有子级的 React.Component

Question

我正在 Gatsby.js 中创建一个博客，但我在转换它时遇到了问题

const TemplateWrapper = ({children}) => (
<div>
  <Helmet
    title="My website"
    meta={[
      { name: 'description', content: 'A brief history of myself' },
      { name: 'keywords', content: 'myself, cv' },
    ]}
  />
  <Header />
  <div>
    {children()}
  </div>
  <Footer/>
</div>)

到正常功能。我尝试创建 React.Component 类，但似乎没有得到孩子。我的目标是制作一个加载屏幕栏，这就是我想要转换它的原因。我试过这个

class Wrapper extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      loading: true
    };
  }
  componentDidMount(){
    setTimeout(() => this.setState({ loading: false }), 2500); 
  }
  render(){
    const { loading } = this.state;
    if(loading){
      return <Loader/>
    }
    return(
      <TemplateWrapper/>
    );
  }
}

然后我导出了 Wrapper .. 但它似乎不起作用，它说孩子不是一个函数，它卡在加载图标 (Loader) 上。有什么办法可以解决这个问题？

笔记。当我导出默认 TemplateWrapper 时，一切正常！