React函数式组件中this.props.children无法渲染内容求助

你的问题出在函数组件的props使用方式错误：DefaultLayout是函数组件，不能通过this.props访问属性，函数组件的props是作为参数直接传入的。

修改步骤： #

1. 给DefaultLayout函数添加props参数：

const DefaultLayout = (props) => {
  // ... 原有代码
}

2. 将Content区域的{this.props.children}替换为{props.children}：

<Content
  className="site-layout-background"
  style={{
    margin: '10px',
    padding: 24,
    minHeight: 280,
  }}>
  {props.children} {/* 这里修改 */}
</Content>

额外优化（可选）： #

• 代码中导入的ReactDOM没有实际用途，可以删除这行：import { ReactDOM } from "react-dom";
• 可以用解构赋值简化props的使用，比如：

const DefaultLayout = ({ children }) => {
  // ... 原有代码
  // 直接用 {children} 代替 props.children
}

修改后，Homepage中传入的<h1>hey</h1>就能正常渲染在DefaultLayout的Content区域了。

内容的提问来源于stack exchange，提问作者Syed Imaaduddin