this.props.children 不起作用。即它不显示另一个 js 文件中的内容

Question

所以基本上我的代码中的 this.props.children 不起作用。即它不显示另一个 js 文件中的内容。有一个文件 defaullayout.js，它有一个内容部分，用于在页面 hompage.js 中显示布局。所以我试图在内容中提供 {this.prop.children} 以在主页中显示默认布局页面，但整个页面显示为空白。请帮我解决这个问题。谢谢！

这是我第一页的代码`thta是DefaultLayout.js

`

import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  CopyOutlined ,
  UnorderedListOutlined,
  LogoutOutlined ,
  HomeOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import '../resources/layout.css';
import { Link } from 'react-router-dom';
import { ReactDOM } from "react-dom";
const { Header, Sider, Content } = Layout;
const DefaultLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo"> <h3>SI Pos</h3> </div>
        
        <Menu theme="dark" mode="inline" defaultSelectedKeys={window.location.pathname}>
            <Menu.Item key="/home" icon={<HomeOutlined />}>
              <Link to='/home'>Home</Link>
            </Menu.Item>
                    
            <Menu.Item key="/bills" icon={<CopyOutlined />}>
              <Link to='/bills'>Bills</Link>
            </Menu.Item>
                    
            <Menu.Item key="/items" icon={<UnorderedListOutlined />}>
            <Link to='/items'>Items</Link>
            </Menu.Item>

          <Menu.Item key="/customers" icon={<UserOutlined />}>
            <Link to='/customers'>Customers</Link>
            </Menu.Item>

          <Menu.Item key="/logout" icon={<LogoutOutlined />}>
                Logout
            </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 10,
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '10px',
            padding: 24,
            minHeight: 280,
          }}>
        
          {this.props.children}
        </Content>
      </Layout>
    </Layout>
  );
};
export default DefaultLayout;

第二个页面是Homepage.js

`

import React from "react";
import DefaultLayout from "../components/DefaultLayout";

function Homepage(){
    return(
        <DefaultLayout>
            <h1>hey</h1>

        </DefaultLayout>
    
    )
}

export default Homepage;

` ``

我希望在主页中显示我的默认页面。预先感谢。

Answer 1

我最好的选择是，您遇到了编译错误，从您的代码库中的内容来看，

{this.props.children}

将导致错误，您在基于类的组件中使用

this props

，而您正在使用功能组件

 < DefaultLayout/>

而是做

const DefaultLayout = (props) => {
...
<Content className="site-layout-background" style={...}>
   {props.children}
</Content>
}

Answer 2

正如之前所告知的，您将不得不改变

const DefaultLayout = () => {}

到

const DefaultLayout = (props) => {}

并将其从

{this.props.children}

中删除，因为这在箭头函数中不可用。

我在这里为您整理了一个简单的示例： https://codesandbox.io/s/react-playground-forked-pr7lsc?f