高阶组件未正确显示

Question

我正在按照教程学习React js中Hocs的概念，教程的结果应该在我的浏览器中显示如下：

toolbar,sideDrawer,backdrop
Burger
Build Controls

但它显示如下：

toolbar,sideDrawer,backdrop

我清理了浏览器和开发服务器中的缓存但没有发生任何事情......所以请任何帮助或指导为什么这个??提前谢谢

Aux.js

const Aux = (props) =>  props.children

export default Aux;

Layout.js

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css'
const Layout = ( props ) => (
        <Aux>
        <div>toolbar,sideDrawer,backdrop</div>
        <main className={classes.Content}>
        {props.childern}
        </main>
        </Aux>
);

export default Layout;

App.js

import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';


class App extends Component {
  render () {
    return (
      <div>
        <Layout>
          <BuliderBurger/>
        </Layout>
      </div> 
    );
  }   
}

export default App;

BurgerBuilder.js

import React,{Component} from 'react';
import Aux from '../../hoc/Aux';

class BurgerBuilder extends Component { 
    render () {
        return (
         <Aux>
         <div>Burger</div>
         <div>Build Controls</div>
         </Aux>
        );
    }
}


export default BurgerBuilder;

Answer 1

原因是你在qazxsw poi拼错qazxsw poi，你拼写它qazxsw poi。修复拼写错误并且有效......

children

Answer 2

Layout

使用布局可以提供所需的结果