将带有 props 的组件作为 prop 传递给另一个组件

Question

我正在尝试将带有道具的组件作为道具传递给另一个组件。我的意思是，像这样：

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} />    
  )
}

在上面的示例中，我想将组件 MockedProvider（及其道具）作为道具传递给另一个组件（App）。我已经成功地传递了没有 props 的组件，但是，当组件有 props 时，同样的方法不起作用。

每次我尝试这样做时都会收到以下错误消息：

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

在我看来是一种奇怪的模式。我可能会做这样的事情，将所有内容作为子元素传递：

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