react-admin 传递 props Main->layout->appBar

Question

我有一个react-admin应用程序来管理用户。现在我需要访问我创建的自定义标头（appBar）中的一些道具，但不知道如何在那里访问这些道具。

这里是一些代码。

Main.js

class Main extends React.Component
{

  render()
  {
    // const { }   = this.state;
    const { t } = this.props;
    const _this = this;

    return (
      <Admin dataProvider={dataProvider} {..._this.props.props} layout={CustomLayout}>
        <Resource name="users"
                  list={<UserList {..._this.props.props} />}
                  edit={<UserEdit {..._this.props.props} />}
                  create={<UserCreate {..._this.props.props} />}
        />
      </Admin>
    );
  }
}

export default Main;

从上面的代码

CustomLayout

const CustomLayout = (props) => <Layout
  {...props}
  appBar={Header}
  sidebar={Sidebar}
/>;

export default CustomLayout;

从上面的代码

Header

class Header extends React.Component {


  // ---> Lifecycle functions <---

  constructor(props)
  {
    super(props);

    // Here I need to access props... 
    
    this.selectCustomer = this.selectCustomer.bind(this);

    this.state = {
      selectedCustomerId: this.props.selectedCustomerId,
    };
  }


    return (
      <div>...</div>
    );
  }
}


export default Header;

如何从 Main -> CustomLayout -> Header 获取 props？如果在

CustomLayout.js

中我将

appBar={Header}

更改为

appBar={<Header {...props} />}

，我会得到

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我想它需要是组件名称。有什么办法可以达到这个目的吗？

Answer 1

这里的首选方法是使用 React 功能组件而不是类和 React.createContext() / React.useContext().