将带有道具的组件作为道具传递给另一个组件

Question

I'm trying to pass a component with props to another component as prop. I mean, something like this:

const App = ({ routes, graphqlProvider, themeProvider }) => {
  const GraphqlProvider = graphqlProvider
  const ThemeProvider = themeProvider

  return (
      <GraphqlProvider>
        <ThemeProvider>
          <BrowserRouter basename="/app">
            {renderRoutes(routes)}
          </BrowserRouter>
        </ThemeProvider>
      </GraphqlProvider>
  )
}

const MyApp = () => {
  const mockedProvider = <MockedProvider mocks={mocks} addTypename={false} />

  return (
    <App routes={routes} themeProvider={ThemeProvider} graphqlProvider={mockedProvider} />    
  )
}

In the example above I'd like to pass the component MockedProvider (and its props) to another component (App) as a prop. I've succeeded passing components without props, however, the same approach isn't working when the component has props.

Every time I try to do that I get the following error message:

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

Answer 1

In my mind is kind of a strange pattern. I would probably do something like this, to pass everything in as child elements:

 return ( <App routes={routes}> <MockedProvider mocks={mocks} addTypename={false} /> <ThemeProvider> <BrowserRouter basename="/app"> {renderRoutes(routes)} </BrowserRouter> </ThemeProvider> </MockedProvider> </App> )