如何在react-admin中实现Main到自定义Header的Props传递

你遇到的错误是因为 react-admin 的 Layout 组件的 appBar 属性要求传入组件类型（函数/类），而非已渲染的 JSX 元素（对象）。直接传 <Header {...props} /> 不符合要求，所以抛出类型错误。以下是正确的实现方式：

步骤1：Main 组件传递自定义 Props 给 CustomLayout #

在 Main 中，将需要传递的自定义 props 合并到 Layout 的配置中：

// Main.jsx
import { Admin } from 'react-admin';
import CustomLayout from './CustomLayout';

const Main = () => {
  // 定义要传递的自定义 props
  const userInfo = { userName: 'Jeroen', userRole: 'admin' };

  return (
    <Admin 
      layout={(layoutProps) => <CustomLayout {...layoutProps} {...userInfo} />}
    >
      {/* 你的资源配置 */}
    </Admin>
  );
};

export default Main;

步骤2：CustomLayout 包装 Header 组件 #

在 CustomLayout 中，创建一个包装组件，将自身接收的 props 和 react-admin 内置的 appBar props 合并后传递给 Header：

// CustomLayout.jsx
import { Layout } from 'react-admin';
import Header from './Header';

const CustomLayout = (props) => {
  // 包装 Header，合并两类 props
  const CustomHeader = (appBarProps) => {
    return <Header {...appBarProps} {...props} />;
  };

  return <Layout {...props} appBar={CustomHeader} />;
};

export default CustomLayout;

步骤3：Header 组件接收并使用 Props #

现在 Header 可以同时拿到 react-admin 内置的 appBar props（如 logout、title）和你自定义的 props：

// Header.jsx
import { AppBar, Toolbar, Typography } from '@mui/material';
import { LogoutButton } from 'react-admin';

const Header = ({ userName, userRole, title, logout }) => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          {title} | 欢迎, {userName} ({userRole})
        </Typography>
        <LogoutButton />
      </Toolbar>
    </AppBar>
  );
};

export default Header;

核心原理 #

react-admin 在渲染 Layout 时，会调用 appBar 传入的组件，并传递自身的内置 props（如登录状态、页面标题等）。通过包装一层函数组件，我们可以把 CustomLayout 接收的自定义 props 和这些内置 props 合并，最终传递给真正的 Header 组件，既满足 react-admin 的要求，又实现了跨组件的 props 传递。

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