学习React封装样式组件后页面空白无控制台报错问题求助

问题根因 #

你自定义的FormContainer组件对接收子元素的props拼写错误：React默认传递子内容的参数名为children，你误写为childern，导致组件无法读取到传入的子内容，渲染时只会输出空的布局容器，所以页面显示空白且无控制台报错（React渲染undefined值时不会抛出错误也不会显示任何内容）。

修复方案 #

修改FormContainer组件的参数拼写即可：

import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'

// 将解构的参数名从childern改为正确的children
const FormContainer = ({ children }) => {
  return (
    <Container>
      <Row className="justify-content-md-center">
        <Col xs={12} md={6}>
          {children}
        </Col> 
      </Row>
    </Container>
  )
}

export default FormContainer

修改后重新运行项目即可正常渲染所有子内容，同时保留你需要的居中布局样式。

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