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

原因是您在children中拼错了Layout，而将其拼写为childern。修正打字错误，它可以工作...

const Layout = ( props ) => (
    <Aux>
    <div>toolbar,sideDrawer,backdrop</div>
    <main className={classes.Content}>
    {props.children}
    </main>
    </Aux>
);

Answer 2

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/>
      </div> 
    );
  }   
}

export default App;

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

高阶订单组件未正确显示

2 个答案: