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）。我已经成功传递了没有道具的组件，但是，当组件带有道具时，相同的方法将无法正常工作。

每次尝试执行此操作时，都会收到以下错误消息：

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

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

1 个答案: