将箭头函数转换为带有子项

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 ..但它似乎不起作用，它说儿童不是一个功能，它坚持加载图标（加载器）。有什么办法解决这个问题？

请注意。当我导出默认的TemplateWrapper时，一切都很完美！