在同一组件中包装Provider引发元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

Question

我在Mobx和Redux中都编写了一个简单的反例，并且可以正常工作

完整的演示可用https://codesandbox.io/s/nw303w6jxl

但是如果我从Provider中删除./src/index.js

const App = () => (
  <div className="container">
    <Mobx />
    <hr />
    <Provider store={store}>
      <Redux />
    </Provider>
  </div>
);

＆放在./src/redux.js中，而默认导出会抛出错误

export default (
  <Provider store={store}>
    <ConnectReduxApp />
  </Provider>
);

  

未捕获的错误：始终违反：元素类型无效：预期   一个字符串（用于内置组件）或一个类/函数，但得到：object

它正在工作，但我不知道为什么会发生？我检查了typeof的默认导出函数./src/redux.js，即

console.log(
    typeof(
       <Provider store={store}>
         <ConnectReduxApp />
       </Provider>
    )
);

及其object，但是如果我只想在我的React Application的一部分中使用Redux怎么办？让我们说一种形式。然后通过这种方式它将引发错误。任何帮助表示赞赏。

Answer 1

之所以发生这种情况，是因为您没有导出返回JSX的函数，也没有导出具有返回JSX的render方法的类，而是导出了JSX本身。

要么像{reduxImported}那样渲染它：

import reduxImported from './src/redux.js'
...
render() {
  <Container>
    {reduxImported}
    <MobX />
  </Container>
}

或将导出更改为：

export default () => (
  <Provider store={store}>
    <ConnectReduxApp />
  </Provider>
)