無法渲染我的組件，需要賦值或 function 調用，而是在 React 中看到了一個表達式

Question

我按照 udemy 課程編寫了代碼。 我無法呈現 Layout 組件的內容是否有任何我遺漏的內容或任何需要糾正的語法錯誤來解決這個問題？

const Aux = (props) => {props.children}

export default Aux;

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

class App extends Component
 {
  render() {
    return (
      <div>
        <Layout>
          <p>Hai.. Is this working ? </p>
        </Layout>
      </div>
    );
  }
}

export default App;

import React from 'react';
import Aux from '../../hoc/Auxx';

const layout = (props) =>(
    <Aux>
    <div>Toolbar,Sidebar,Backdrop</div>
    <main>
        {props.children}
    </main>
    </Aux>
    
);

export default layout;

Answer 1

你的問題是Aux是一個空白組件。

當你使用語法const Aux = (props) => {props.children}你實際上什么都不返回！

你看， javascript 認為{ }是 function 本身，而不是返回你的props.children 。 只需刪除括號：

const Aux = (props) => props.children;

Answer 2

我已將您的代碼修改如下：

const Aux = (props) => props.children // removed the {} so that it can return the children 

export default Aux;

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

class App extends Component
 {
  render() {
    return (
      <div>
        <Layout>
          <p>Hai.. Is this working ? </p>
        </Layout>
      </div>
    );
  }
}

export default App;

import React from 'react';
import Aux from '../../hoc/Auxx';

const Layout = (props) =>( //changed the layout to Layout: it needs to be capitalized
    <Aux>
    <div>Toolbar,Sidebar,Backdrop</div>
    <main>
        {props.children}
    </main>
    </Aux>
    
);

export default layout;