React+TS项目中Background包装组件内部嵌套内容无法显示问题

API 探路者

2026-9-29

问题原因

React 中自定义组件的嵌套内容会默认作为 children 属性传递给组件，你的 Background 和 BackgroundView 两层组件都没有接收、传递该属性，也没有将其渲染到组件结构中，因此内部嵌套的内容不会被显示。

修复步骤

修改 Background 逻辑层组件，接收并传递 children 给视图层：

// 带TS类型声明写法
import type { ReactNode } from 'react';
import BackgroundView from './Background.view';

interface BackgroundProps {
  children?: ReactNode;
}

const Background = ({ children }: BackgroundProps) => {
  return (
    <BackgroundView>{children}</BackgroundView>
  );
};

Background.displayName = 'Background';
Background.defaultProps = {};

export default Background;

修改 BackgroundView 视图层组件，接收 children 并渲染到容器内部：

// 带TS类型声明写法
import type { ReactNode } from 'react';
import classes from './Background.module.scss';

interface BackgroundViewProps {
  children?: ReactNode;
}

const BackgroundView = ({ children }: BackgroundViewProps) => {
  return (
    <div className={classes['mainContainer']}>{children}</div>
  );
};

BackgroundView.displayName = 'Background';
BackgroundView.defaultProps = {};

export default BackgroundView;